twitter-bootstrap - 模态中的模态 - 如何仅关闭内部模态

Question

我有一个正常工作的modal显示 unordered list .此元素之一 list包含一个打开内部 modal 的按钮(它又包含一个视频播放器)。这一切都很好，但是当我解雇内部 modal , 两个 modals (初始和内部)关闭。下面的代码显示了我为内部 modal 所做的事情:

<tr><td>List Item <button class="btn btn-success" data-toggle="modal" data-target="#myInnerModal1"></button>
        <div class="modal" id="myInnerModal1">
            <div class="modal-dialogue">
                <div class="modal-content">
                    <div class="modal-header">
                        <button class="close" data-dismiss="modal">&times;</button>
                        <h4 class="modal-title">Title</h4>
                    </div>
                <div class="modal-body">
                    <video class="myVideo" id="preview1" controls>
                        <source src="video.m4v" type="video/mp4">
                    </video>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
</td></tr>

我想找到一种在 dismiss-modal 中指定的方法class其中modal关闭(在这种情况下，它将是 myInnerModal1 )。

Answer 1

您不需要任何额外或附加功能来解决问题。关闭内部模态时两个模态都关闭的原因是因为您将模态放在模态内部，并且两个模态都具有相同的关闭按钮data-dismiss="modal"所以点击内部模式关闭按钮也会触发data-dismiss="modal"也是初始模态的。

Fiddle

简单的解决方案是将内部模态调用按钮保留在初始模态中，但从初始模态中删除内部模态 HTML 并将其放在外部，它将解决问题

Fiddle working example

原因

Bootstrap 不支持 stacked/simultaneous/overlapping modals ;

Overlapping modals not supported

确保在另一个仍然可见时不要打开一个模态。一次显示多个模式需要自定义代码。

模态中的替代解决方案模态

因此，如果您仍想将内部模态 HTML 保留在初始模态中，那么以下代码将完成这项工作并解决问题

在内部模态 HTML 关闭按钮更改 data-dismiss="modal"至data-dismiss-modal="modal2"

<button class="btn btn-default" data-dismiss-modal="modal2">Close</button>

并添加以下代码

$("button[data-dismiss-modal=modal2]").click(function(){
    $('#myInnerModal1').modal('hide');
});

它只会关闭内部模态并保持初始模态打开。

$("button[data-dismiss-modal=modal2]").click(function () {
    $('#myInnerModal1').modal('hide');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<button type="button" class="btn btn-info" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                 <h4 class="modal-title">Modal Header</h4>

            </div>
            <div class="modal-body">
                <tr>
                    <td>List Item
                        <button class="btn btn-success" data-toggle="modal" data-target="#myInnerModal1"></button>
                        <div class="modal" id="myInnerModal1">
                            <div class="modal-dialogue">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <button class="close" data-dismiss="modal">&times;</button>
                                         <h4 class="modal-title">Title</h4>

                                    </div>
                                    <div class="modal-body">
                                        <video class="myVideo" id="preview1" controls>
                                            <source src="video.m4v" type="video/mp4">
                                        </video>
                                    </div>
                                    <div class="modal-footer">
                                        <button class="btn btn-default" data-dismiss-modal="modal2">Close</button>
                                    </div>
                                </div>
                            </div>
                    </td>
                </tr>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>