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-->

我希望usere按下yes按钮隐藏模态（它表示当另一个打开时bootstrap不允许模态打开）为.modal-body加载新的html内容并再次dipslay模式对话框。只有我得到的是黑色屏幕（就像它出现的模态阴影时），但模态永远不会出现。我使用chrome dev工具玩它，通常会出现模态

chrome dev-tools

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

使用上述命令，新的“body”正常加载。但是，如果我尝试首先加载对话框，然后按下是按钮，即使从chrome dev-tools触发模态我得到相同的行为，黑屏。可能有什么不对？

chrome dev-tools提供相同的黑屏

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

现在，即使单击“关闭”按钮，每次关闭它时都会弹回模态。当用户单击“是”按钮时，您只想听一次此事件。您可以利用jQuery.one()活页夹：

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

fiddle

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

您可以使用$.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');
    });
});

Answer 2

正确的答案应该是将模态放在文档的顶部。

在body标签结束之前或者在body标签开始之后，可能只有一个级别的嵌套

<body>  
<div>
    <!-- no other nesting -->
    <!-- put modal here -->
    <div class="modal fade">
    <div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title">Modal title</h4>
        </div>
        <div class="modal-body">
            <p>One fine body&hellip;</p>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
        </div>
       </div><!-- /.modal-content -->
         </div><!-- /.modal-dialog -->
     </div><!-- .modal -->
     </div><!-- first div end here -->    
       </body>

Answer 3

这就是它的工作原理。我不得不运行代码

$dlg.appendTo('body');
$("#id_of_new_modal").modal('show');

而不是

$dlg.appendTo('body').modal('show');

我不太清楚为什么会这样。我以为使用$是一个jquery对象所以

$dlg.appendTo('body').modal('show');

应该有效。但事实并非如此。如果您有任何想法请注释我想知道为什么在事情：）

bootstrap 3模态对话框不能正常渲染

3 个答案: