如何重用一个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问题，提到了此行为此处和此处.我要求重新打开问题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屋！