jQuery 如何重用一个 Bootstrap 模态 div？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14045515/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I reuse one Bootstrap modal div?
提问by Jeromy French
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:
我希望能够在页面上有许多不同的链接，通过 Bootstrap 的模态插件重用一个模态 div：
<h3>This button shows a modal (<code>#utility</code>) with text "Phasellus <em>tincidunt gravida</em>..."</h3>
<br />
<a id="file_attach" data-toggle="modal" href="http://fiddle.jshell.net/jhfrench/6K8rD/show/" data-target="#utility" class="btn">Modal 1</a><br />
<h3>This button should invoke the same modal (<code>#utility</code>), but fill it with text "Phasellus <em>egestas est eu</em>..."</h3>
<br />
<a id="file_attach" data-toggle="modal" href="http://fiddle.jshell.net/jhfrench/AWSnt/show/" data-target="#utility" class="btn">Modal 2</a><br />
<!-- Modal -->
<div id="utility" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Click outside modal to close it</h3>
</div>
<div class="modal-body">
<p>One fine body…this is getting replaced with content that comes from passed-in href</p>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-primary">Save changes</button>
</div>
</div>
I'd expect that clicking on either link (which are styled as buttons) would invoke the modal and load the modal with the page (value of href) corresponding to the clicked button. Instead, the modal always loads with the content of the link you click first; the modal does not "refresh" with content that should be dictated by hrefof the "other" link.
我希望点击任一链接（样式为按钮）将调用模态并加载具有与href单击的按钮对应的页面（值）的模态。相反，模态总是加载您首先单击的链接的内容；模态不会“刷新”应由href“其他”链接指定的内容。
I think this is a Bootstrap bug, but I'm asking the question here in case I'm using it incorrectly.
我认为这是一个 Bootstrap 错误，但我在这里问这个问题，以防我不正确地使用它。
Please see http://jsfiddle.net/jhfrench/qv5u5/for a demonstration.
回答by Jeromy French
After further research, I found a few Bootstrap issues mentioning this behaviour hereand here. I've asked for issue 5514to be reopened.
经过进一步研究，我发现了一些 Bootstrap 问题在这里和这里提到了这种行为。我已经要求重新打开问题 5514。
Meanwhile, this jQuery will patch up the problem*:
同时，这个 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('<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.*
有关工作示例，请参阅http://jsfiddle.net/jhfrench/qv5u5/51/。*
*-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.
*-出于某种原因，有时当您单击小提琴中的按钮时，模态会显示为空白。这不是我正在使用的应用程序中的问题，所以我怀疑这是一个与此问题/答案无关的问题。
回答by nakupanda
Instead of having to write html markups of modal and manipulate it via javascript, I would use Bootstrap-Dialog to ease everything:
我不必编写模态的 html 标记并通过 javascript 操作它，而是使用 Bootstrap-Dialog 来简化一切：
$('.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/
在这里查看现场演示，它会加载您在示例中提供的两个网址：http: //jsfiddle.net/txrM8/
See more about Bootstrap-Dialog: http://nakupanda.github.io/bootstrap-dialog/
查看有关 Bootstrap-Dialog 的更多信息：http: //nakupanda.github.io/bootstrap-dialog/
