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

Question

我有一个正常工作的模态框，可以显示一个无序列表。该列表中的一个项目包含一个按钮，点击它会打开一个内部模态框（其中包含一个视频播放器）。这一切都很好，但当我关闭内部模态框时，两个模态框（初始和内部）都被关闭了。下面的代码显示了我为内部模态框所做的事情：

<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 样式中指定需要关闭的 modal （在本例中，应该是myInnerModal1）。

- OliG

---

你是如何关闭模态框的？你可以尝试使用一个按钮并调用JS代码$('#theIdOfTheModal').modal('hide'); - Bak

我更新了我的初始帖子以显示代码。我正在使用一个按钮关闭模态框，在代码中应该在哪里调用js函数来强制关闭模态框（抱歉，可能是愚蠢的问题，我是一个完全的JS初学者...）谢谢 - OliG

尝试使用$("#myInnerModal1").modal("hide");。 - Bak

我给用于关闭内部模态框的按钮添加了一个id（比如说'closeMyModal'），然后定义了以下函数：$(".closeMyModal").click(function () { $("#myInnerModal1").modal("toggle"); });但是这仍然会关闭两个模态框... - OliG

Answer 1

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

示例

简单的解决方法是将内部模态框调用按钮放在初始模态框中，但将内部模态框的 HTML 移出初始模态框并放到外面即可解决问题。

工作示例

原因

Bootstrap 不支持堆叠/同时/重叠的模态框;

不支持重叠的模态框

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

备选方案模态框内部

因此，如果仍然希望将内部模态框的 HTML 放在初始模态框中，则以下代码将完成工作并解决问题。

在内部模态框 HTML 中，将关闭按钮更改为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>

- Shehary

---

很好的发现，提高另一个JavaScript事件的名称是一个不错的选择。 - BendaThierry.com

Answer 2

之前的解决方案存在问题，即在第二个模态框关闭后，第一个模态框的行为会发生改变！当你用鼠标滚动时，你会发现它的工作方式不同，第一个模态框被冻结了！

像这样：http://jsfiddle.net/ybtj4vkr/ (不好！！！) 为此，我找到了另一种解决方案，同时允许拥有一个“内部”模态框： http://jsfiddle.net/437mt51h/

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

        <button class="btn btn-success" id="openmodal2">Open Modal 2</button>

        <table>
          <tr>
            <td>List Item
            </td>
          </tr>
          <tr>
            <td>List Item
            </td>
          </tr>
          // ...

        </table>

        <div class="modal" id="myInnerModal1">
          <div class="modal-dialogue">
            <div class="modal-content">
              <div class="modal-header">
                <button class="close">&times;</button>
                <h4 class="modal-title">Title</h4>

              </div>
              <div class="modal-body">
                modal 2

              </div>
              <div class="modal-footer">
                <button class="btn btn-default" id="closemodal2">Close</button>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

我使用Javascript代码（JQuery）手动处理第二个模态框的打开和关闭：

$(function() {

  $("#closemodal2").click(function () {
    $("#myInnerModal1").hide();
  });


  $("#openmodal2").click(function () {
    $("#myInnerModal1").show();
    $("#myInnerModal1").css('opacity', '1');
  });

});

- A. Morel

Answer 3

也许可以使用JavaScript代码通过其唯一的HTML ID关闭内部模态框：

$(function () {
  $('#innerModal').modal('toggle'); // or 'hide' depending on your needs!
});

- BendaThierry.com

---

谢谢您的回答。正如我在对Bak的评论中所说，我尝试了您建议的方法，但仍然会关闭两个模态框... - OliG

Answer 4

以下代码适用于我。在内部模态框中删除 data-dismiss="modal"，并为 HTML 关闭按钮添加类名。

<a class="openModal" href="#">
    <i class="fa fa-info-circle" aria-hidden="true"></i>
</a>

<button type="button" class="close closeModal">&times;</button>
 
$('.closeModal').click(function () {
  $('.modal-backdrop').remove();
  $('#innerModal').hide();
});

$('.openModal').click(function () {
    $('#innerModal').modal().show();       
})

- Sathish