Jquery 引导程序3模式对话框未按应有方式呈现_Jquery_Twitter Bootstrap_Modal Dialog_Jquery Load

Jquery 引导程序3模式对话框未按应有方式呈现

jquery twitter-bootstrap

Jquery 引导程序3模式对话框未按应有方式呈现,jquery,twitter-bootstrap,modal-dialog,jquery-load,Jquery,Twitter Bootstrap,Modal Dialog,Jquery Load,我有以下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" ro

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

使用上述命令，新“主体”将正常加载。但是，如果我尝试先加载对话框，然后按下yes按钮，即使在从chrome开发工具触发模式时，我也会得到相同的行为，即黑屏。有什么不对劲吗

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

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

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

您可以收听

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

但是我看不出有什么好的理由保持同一个对话框处于打开状态——它包括一个带有特定逻辑的“是”按钮，在加载完成后需要更改该按钮

您可以使用

$提供完整的对话框。获取

，只需显示：

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

这就是它的工作原理。我必须运行代码

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

而不是

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

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

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

应该有用的。但事实并非如此。如果你有什么想法为什么请评论我想知道为什么：）

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

在主体标记结束之前或主体标记开始之后，只能有一个嵌套级别

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


&时代；
情态标题
一个好身体&hellip
接近
保存更改

正如一位用户（删除了他的评论）所建议的那样，我正在使用此$（“.modal body”）.load（'/url/that/returns/html/'，function（）{$（“#myModal”）.modal（'show'）；}）加载ajax后显示页面；而且效果很好。但现在当我按下“以后可能”按钮时，它也有同样的行为。我错过了模态，但我没有返回到我的页面，但我只是得到了黑色阴影页面，就像模态没有内容一样。加载一个全新的模态比编辑旧的模态更好吗？我还剩下一个背景，即使我使用get方法调用一个全新的对话框，我也应该使用你的listen来隐藏事件吗？无论使用哪种方法，我都会得到两个背景div，即使我使用one方法。你的代码适用于同一个对话框，但是如果加载另一个对话框，我会得到两个背景div，一个来自新的dlg，另一个来自前一个。即使我使用了您建议的一种方法，并将$.get（）包装到hidden.bs.modal事件中，仍然会得到相同的结果。我的脚本在之前的html文件中

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