¿Cómo se especifican las acciones principales y secundarias para una ventana modal de Bootstrap?

Question

Estoy usando Twitter's Bootstrap modal functionality. Cuando alguien hace clic presenten sobre mi forma, estoy probando a ver si se han verificado ninguna de las opciones disponibles:

$('form').submit(function(event) { 
     var $target = $('.column').find(':checkbox');               
     if(!$target.is(':checked')){ // if none of the sub-options are checked 
      event.preventDefault(); 
      $('#my-modal').modal({ 
       show: 'true', 
       backdrop: 'true', 
       keyboard: 'true' 
      }); 
     }          
    }); 

... y mostrando la ventana modal si no lo han hecho. Entonces me gustaría que el botón 'primario' en el modal continúe con el envío del formulario, y el botón secundario simplemente cierre la ventana modal.

Estoy seguro de que esto debería ser bastante trivial, pero mi conocimiento actual de jQuery es solo en el nivel de copiar/pegar, y la documentación no proporciona un ejemplo de cómo hacerlo.

He configurado un jsFiddle de lo que tengo here - gracias.

EDIT - He añadido a continuación un código (se siente un poco hacky) que cerrará la ventana modal cuando se haga clic en el botón secundario. Aún no sabe cómo dar forma el visto bueno cuando se hace clic en el botón principal:

$('#my-modal .secondary').click(function() { 
    $('#my-modal').modal({ 
     show: 'false' 
    }); 
}); 

Ahora la cuestión se reduce a: '¿hay una forma sencilla de decir la forma 'bien, continuar' una vez que se hace clic en el botón primario? '

Answer 1

Bueno, el problema es que ahora mismo Bootstrap no tiene ninguna devolución de llamada adecuada para sus botones de acción. Por lo tanto, tienes que hacer esto de una manera indirecta y crear la tuya propia. ¡Espero que esto ayude!

Aquí está un violín de JS mostrarlo trabajar: http://jsfiddle.net/iwasrobbed/rYLWz/3/

Y aquí está el código:

archivo HTML

<form> 
<ul class="inputs-list"> 
    <li> 
     <label> 
     <input type="checkbox" name="optionsCheckboxes" value="option1" /> 
     <span>Option 1</span> 
     </label> 
    </li> 
    <li> 
     <label> 
     <input type="checkbox" name="optionsCheckboxes" value="option2" /> 
     <span>Option 2</span> 
     </label> 
    </li> 
</ul> 
<div class="actions"> 
    <a href="#" class="save-button btn large primary">Save changes &raquo;</a> 

    <!-- Hide the real submit button /--> 
    <input type="submit" class="hidden"> 
</div> 
</form> 

<div id="my-modal" class="modal hide fade"> 
    <div class="modal-header"> 
     <a href="#" class="close">&times;</a> 
     <h3>Are you sure?</h3> 
    </div> 
    <div class="modal-body"> 
     <p>You haven&rsquo;t selected any options.</p> 
    </div> 
    <div class="modal-footer"> 
     <a href="#" class="okay-button btn primary">Okay &raquo;</a> 
     <a href="#" class="go-back-button btn secondary">Go back</a> 
    </div> 
</div> <!-- /modal --> 

JS Archivo

$(document).ready(function() { 

    // Verify if checkboxes were checked. 
    // If they weren't, show a modal 
    $('a.save-button').click(function() { 
     if ($("input:checked").length === 0) { 

      $('#my-modal').modal({ 
       show: 'true', 
       backdrop: 'true', 
       keyboard: 'true' 
      }); 
     } else { 
      $('form').submit(); 
     } 

     // prevent click jump 
     return false; 
    }); 

    // Let's attach a listener on form submission 
    $('form').submit(function() { 
     alert('We submitted the form!'); 
    }); 

    // Hide modal if "Go back" is pressed 
    $('#my-modal .go-back-button').click(function() { 
     $('#my-modal').modal('hide'); 
     alert('We went back to the form'); 
    }); 

    // Hide modal if "Okay" is pressed 
    $('#my-modal .okay-button').click(function() { 
     $('#my-modal').modal('hide'); 
     $('form').submit(); 
    }); 

}); 

He añadido un poco de CSS también:

ul.inputs-list li { 
    margin-left: 10px; 
} 
.hidden { 
    display: none 
}