如何重用一个 Bootstrap 模态 div？答案

【问题标题】：How can I reuse one Bootstrap modal div?如何重用一个 Bootstrap 模态 div？
【发布时间】：2012-12-12 07:15:34
【问题描述】：

我希望能够通过 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">&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/ 进行演示。

【问题讨论】：

你试过调用removeData函数吗？类似于： $('body').on('hidden', '.modal', function () { $(this).removeData('modal'); });
@Scott：试过了（见小提琴），但没有乐趣。

标签： jquery twitter-bootstrap modal-dialog

【解决方案1】：

经过进一步研究，我发现一些 Bootstrap 问题提到了这种行为 here 和 here。我已要求重新打开 issue 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/。*

*-出于某种原因，有时当您单击小提琴中的按钮时，模式会显示为空白。这不是我正在使用的应用程序的问题，所以我怀疑这是与此问题/答案无关的问题。

【讨论】：

此答案适用于所有浏览器，并允许我使用 jQuery 选择器对每个链接进行更多自定义标签。谢谢！
这很棒！希望这将被修补到主要的 Bootstrap 分支。
@Jeromy：即使 OP 说 $(this).removeData('modal'); 的方法不起作用，我在同一个小提琴上也能正常工作。你能解释一下你的补丁如何比removeData 更好吗？
只是提醒任何想要重用某些模态但仍希望能够一次加载两个模态或不覆盖给定模态中以前的数据的人（无论原因，即防止对已加载数据的额外 ajax 请求）。如果是您，请将此行： var target_modal_id_str = $(this).data("target"); 作为点击绑定函数中的第一行，然后使用 $( target_modal_id_str) 作为作用域模态容器。我自己也遇到了这个问题，所以我想我会分享解决方案。

【解决方案2】：

我不必编写模态的 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();
});

查看这里的现场演示，它会加载您在示例中提供的两个网址： http://jsfiddle.net/txrM8/

详细了解 Bootstrap-Dialog： http://nakupanda.github.io/bootstrap-dialog/

【讨论】：