bootstrap 3 模态对话框未按应有的方式呈现答案

【问题标题】：bootstrap 3 modal dialog not rendering as it shouldbootstrap 3 模态对话框未按应有的方式呈现
【发布时间】：2013-12-04 09:39:10
【问题描述】：

我有以下 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-->

我希望用户按下“是”按钮隐藏模式（它表示当另一个模式打开时引导程序不允许模式打开）为 .modal-body 加载新的 html 内容并再次显示模式对话框。只有我得到的是黑屏（比如当模态出现阴影时），但模态永远不会出现。我使用 chrome 开发工具玩过它，模态显示正常

chrome 开发工具

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

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

提供相同黑屏的chrome开发工具

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

【问题讨论】：

正如用户建议的那样（谁删除了他的评论），我正在使用 $(".modal-body").load('/url/that/returns/ 加载 ajax 后显示页面html/', function(){ $("#myModal").modal('show'); });并且工作正常。但是现在当我按下可能稍后按钮时它具有相同的行为。关闭模式，但我没有返回到我的页面，但我只是得到黑色阴影页面，就像模式没有内容一样

标签： jquery twitter-bootstrap modal-dialog jquery-load

【解决方案1】：

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

你可以收听hidden.bs.modal事件：

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

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

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

【讨论】：

加载一个全新的模态而不是编辑旧模态会更好吗？
我还剩下一个背景，即使我使用 get 方法调用一个全新的对话框，我是否应该使用你的监听来隐藏事件？
当我使用任何一种方式时，我仍然会得到两个背景 div，即使我使用一种方法。
您的代码适用于同一个对话框，但如果正在加载另一个对话框，它将不起作用，我得到两个背景 div，一个来自新 dlg，一个来自前一个。即使我使用您建议的一种方法，并将 $.get() 包装在 hidden.bs.modal 事件中，我仍然得到相同的结果。我的脚本在

【解决方案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>

【讨论】：

【解决方案3】：

这就是它的工作方式。我必须运行代码

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

而不是

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

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

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

应该有效。但它没有。如果您有任何想法为什么请评论我想知道事情的原因:)

【讨论】：