How can I reuse one Bootstrap modal div?

Question

I\'d like to be able to have a number of different links on a page reuse one modal div via Bootstrap\'s modal plugin:

This button shows a modal (&l         


        

Answer 1

After further research, I found a few Bootstrap issues mentioning this behaviour here and here. I've asked for issue 5514 to be reopened.

Meanwhile, this jQuery will patch up the problem*:

$('a[data-toggle="modal"]').on('click', function(){
    // update modal header with contents of button that invoked the modal
    $('#myModalLabel').html( $(this).html() );
    //fixes a bootstrap bug that prevents a modal from being reused
    $('#utility_body').load(
        $(this).attr('href'),
        function(response, status, xhr) {
            if (status === 'error') {
                //console.log('got here');
                $('#utility_body').html('<h2>Oh boy</h2><p>Sorry, but there was an error:' + xhr.status + ' ' + xhr.statusText+ '</p>');
            }
            return this;
        }
    );
});​

Please see http://jsfiddle.net/jhfrench/qv5u5/51/ for a working example.*

*-For some reason, sometimes when you click the button in the fiddle the modal will show blank. This is not a problem in the application I'm working with, so I suspect it's a problem unrelated to this question/answer.

Answer 2

Instead of having to write html markups of modal and manipulate it via javascript, I would use Bootstrap-Dialog to ease everything:

$('.modal-btn').click(function(event){
    var $link = $(this);
    new BootstrapDialog({
        title   :   'Load content of : ' + $link.attr('href'),
        content :   $('<div>Loading...</div>').load($link.attr('href')),
        buttons :   [{
            label   :   'Close',
            onclick :   function(dialog){
                dialog.close();
            }
        }, {
            label   :   'Save changes',
            cssClass:   'btn-primary',
            onclick :   function(dialog){
                alert('The content of the dialog is: ' + dialog.getBody().html());
                dialog.close();
            }
        }]
    }).open();

    event.preventDefault();
});

See here for a live demo, it loads the two urls you provided in your example: http://jsfiddle.net/txrM8/

See more about Bootstrap-Dialog: http://nakupanda.github.io/bootstrap-dialog/