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('
Oh boy
Sorry, but there was an error:' + xhr.status + ' ' + xhr.statusText+ '
');
            }
            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.