How do you specify the primary and secondary actions for a Bootstrap modal window?

Question

I\'m using Twitter\'s Bootstrap modal functionality. When someone clicks submit on my form, I\'m testing to see if they have checked any of the available options:

Answer 1

Well, the problem is that right now Bootstrap does not have any proper callbacks for their action buttons. Therefore, you have to do this in a roundabout way and create your own. Hope this helps!

Here's a JS fiddle showing it work: http://jsfiddle.net/iwasrobbed/rYLWz/3/

And here is the code:

HTML File

    

      
        
        Option 1
      
    
    

      
        
        Option 2
      
    


    Save changes »

    
    




    

        ×
        
Are you sure?
    
    

        
You haven’t selected any options.
    
    

        Okay »
        Go back
    
 

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

});

I added a little CSS as well:

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