Come si specificano le azioni primarie e secondarie per una finestra modale Bootstrap?

Question

Sto usando Twitter's Bootstrap modal functionality. Quando qualcuno fa clic presentare sulla mia forma, sto testando per vedere se hanno controllato una delle opzioni disponibili:

$('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' 
      }); 
     }          
    }); 

... e mostra la finestra modale se non l'hanno. Mi piacerebbe quindi che il pulsante "primario" sul modale continuasse con il modulo di invio e il pulsante secondario per chiudere semplicemente la finestra modale.

Sono sicuro che questo dovrebbe essere abbastanza semplice da realizzare, ma la mia attuale conoscenza di jQuery è solo al livello di copia/incolla, e la documentazione non fornisce un esempio di come farlo.

Ho impostato un jsFiddle di quello che ho here - grazie.

EDIT - Ho aggiunto sotto un po 'di codice (sembra un po' hacky) che chiuderà la finestra modale quando si fa clic sul pulsante secondario. Ancora non è sicuro come dare forma l'ok quando il pulsante principale viene cliccato:

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

La questione ora si riduce a: 'c'è un modo semplice per dire al modulo 'va bene, portare avanti' una volta cliccato il pulsante principale? '

Answer 1

Bene, il problema è che in questo momento Bootstrap non dispone di callback appropriati per i pulsanti di azione. Pertanto, devi farlo in modo indiretto e crearne uno tuo. Spero che questo ti aiuti!

Ecco un violino di JS mostrarlo funzionare: http://jsfiddle.net/iwasrobbed/rYLWz/3/

Ed ecco il codice:

file 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 file

$(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(); 
    }); 

}); 

Ho aggiunto anche un piccolo CSS:

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