如何重用一个Bootstrap模态div？

我希望能够通过Bootstrap的模态插件在页面上使用多个不同的链接重用一个模态div：

This button shows a modal (#utility) with text "Phasellus tincidunt gravida..."
 
 Modal 1
 
This button should invoke the same modal (#utility), but fill it with text "Phasellus egestas est eu..."
 
 Modal 2
  
 
 × 
Click outside modal to close it
 
 
 
One fine body…this is getting replaced with content that comes from passed-in href
 
 
 Close Save changes 
  

我希望点击任一链接（它们被设置为按钮）将调用模态并加载模式，其中页面（值为href ）对应于单击的按钮。 相反，模态总是加载您首先单击的链接的内容; 模态不会“刷新”内容应该由“其他”链接的href决定。

我认为这是一个Bootstrap错误，但我在这里问这个问题，以防我错误地使用它。

请参阅http://jsfiddle.net/jhfrench/qv5u5/进行演示。

Answer 1

经过进一步的研究，我发现了一些Bootstrap问题， 在 这里和这里提到了这种行为。 我已经要求重新开放问题5514 。

同时，这个jQuery会修补问题*：

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

有关工作示例，请参阅http://jsfiddle.net/jhfrench/qv5u5/51/。*

* – 由于某种原因，有时当你点击小提琴中的按钮时，模态将显示为空白。 这在我正在使用的应用程序中不是问题，因此我怀疑这是与此问题/答案无关的问题。

Answer 2

而不是必须编写模式的html标记并通过javascript操作它，我会使用Bootstrap-Dialog来简化一切：

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

在这里查看实时演示，它会加载您在示例中提供的两个URL： http ： //jsfiddle.net/txrM8/

有关Bootstrap-Dialog的更多信息，请访问： http ： //nakupanda.github.io/bootstrap-dialog/