jquery - Bootstrap 3 模式对话框未按应有的方式呈现

Question

我有以下 JavaScript 代码

$("#modal-yes-button").click(function (){
    $("#myModal").modal('hide');
    $(".modal-body").load('/url/that/returns/an/html/');
    $("#myModal").modal('show');
});

以及以下模式

<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">

            </div>
            <div class="modal-body">
                <h3>This is a question answer yes or later</h3>
            </div>
            <div class="modal-footer">
                <button class="btn btn-danger" data-dismiss="modal" aria-hidden="true">Maybe Later</button>
                <button id="modal-yes-button" class="btn btn-info" aria-hidden="true">Yes</button>

            </div>
        </div><!--modal-content-->
    </div><!--modal-dialog-->
</div><!--myModal-->

我希望用户按"is"按钮隐藏模态(它表示 Bootstrap 在另一个打开时不允许模态打开)加载 .modal-body 的新 html 内容并再次显示模态对话框。只有我得到的是黑屏(就像当模式出现阴影时)，但模式永远不会出现。我使用 chrome 开发工具玩了它，模态显示正常

chrome 开发工具

modaldialog = $("#myModal");
modaldlgBody = $(".modal-body");
modaldlgBody.load('/url/that/returns/html/');
modaldialog.modal('show');

通过上述命令，新的“body”会正常加载。但是，如果我尝试先加载对话框，然后按"is"按钮，即使从 chrome 开发工具触发模式，我也会得到相同的行为，黑屏。可能出了什么问题？

chrome 开发工具给出相同的黑屏

modaldialog = $("#myModal");
modaldialog.modal('show');
#pressing yes gets me the same black screen.

Answer 1

首先，您应该等待关闭动画完成，然后再重新打开对话框。

您可以监听hidden.bs.modal事件:

$('#myModal').on('hidden.bs.modal', function(){
    $('#myModal').modal('show');
});

现在，每次关闭模态框时，即使单击“关闭”按钮，它都会弹出它。您只想在用户单击"is"按钮时监听此事件一次。您可以利用 jQuery.one() 绑定(bind)器:

$('#modal-yes-button').click(function(){
   $('#myModal').one('hidden.bs.modal', function(){
       $('#myModal').modal('show');
   }); 
   $('#myModal').modal('hide');     
});

fiddle

<小时/>

但我认为没有充分的理由保持同一个对话框打开 - 它包含一个具有特定逻辑的"is"按钮，加载完成后需要更改......

您可以使用 $.get 提供完整的对话框，并简单地显示该对话框:

$('#modal-yes-button').click(function(){
    $('#myModal').modal('hide');
    $.get(url, function(html){
        //html should contain a complete modal markup, including
        // .modal, .modal-header, .modal-body ...
        var $dlg = $(html);
        // if needed, add specific handlers :
        $dlg.on('click', '#whatever', function(){ /*do stuff*/ });
        $dlg.appendTo('body').modal('show');
    });
});