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

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 :   $('
Loading...
').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/