如何重复使用一个Bootstrap模态框？

Question

我希望能够通过Bootstrap modal插件，使页面上的多个不同链接重复使用同一个模态框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">&times;</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>

我希望点击任何一个链接（它们都被设计成按钮）都会调用模态窗口，并加载与所点击按钮对应的页面(href的值)。然而实际情况是，模态窗口总是以您首次点击的链接内容加载；模态窗口不会通过“另一个”链接的href来更新内容。

我认为这是Bootstrap的错误，但如果我使用不正确，我在这里提问。

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

- Jeromy French

---

你尝试调用removeData函数了吗？ 类似这样：$('body').on('hidden', '.modal', function () { $(this).removeData('modal'); }); - Scott Simpson

@Scott：尝试了一下（请参见fiddle），但没有成功。 - Jeromy French

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

请参见http://jsfiddle.net/jhfrench/qv5u5/51/，其中提供了一个可行的示例。注意：有时候在单击fiddle中的按钮时，模态框会显示为空白。但这不是我正在处理的应用程序的问题，所以我认为这与这个问题/答案无关。

- Jeromy French

---

这个答案适用于所有浏览器，并允许我使用jQuery选择器根据每个链接自定义标签。谢谢！ - Mark

这个很好用！希望这能被合并到 Bootstrap 主分支中。 - cman77

@Jeromy：尽管OP说方法$(this).removeData('modal');不起作用，但我在相同的小例子中成功地运行它。你能否解释一下你的修补方法比removeData更好的原因？ - BPm

提醒任何想要重用某些模态框但仍希望能够同时加载两个模态框或不覆盖给定模态框中先前的数据（出于任何原因，例如防止为已加载的数据发出额外的ajax请求）的人。如果您是这样的人，请将此行放置在单击绑定函数内的第一行：**var target_modal_id_str = $(this).data("target");，然后使用$(target_modal_id_str)**作为范围限定的模态框容器。我自己也遇到了这个问题，所以我想分享解决方案。 - mkralla11

Answer 2

使用Bootstrap-Dialog，可以避免手动编写HTML标记和通过JavaScript进行操作的麻烦:

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

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

了解有关Bootstrap-Dialog的更多信息： http://nakupanda.github.io/bootstrap-dialog/

- nakupanda