如何重用一个 Bootstrap 模态 div? [英] How can I reuse one Bootstrap modal div?

问题描述

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

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:

<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 指示的内容.

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 href of the "other" link.

我认为这是一个 Bootstrap 错误，但我在这里提出问题以防我使用不正确.

I think this is a Bootstrap bug, but I'm asking the question here in case I'm using it incorrectly.

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

推荐答案

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

After further research, I found a few Bootstrap issues mentioning this behaviour here and here. I've asked for issue 5514 to be reopened.

同时，这个 jQuery 将解决问题*:

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

请参阅 http://jsfiddle.net/jhfrench/qv5u5/51/ 了解一个工作示例.*

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.

这篇关于如何重用一个 Bootstrap 模态 div?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！