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

您不需要任何额外或额外的功能来解决问题。原因是当你关闭内部模态时两个模态都会关闭，因为你将模态置于模态中，并且两个模态都具有相同>>> import natsort >>> ll = ['Picture 13.jpg', 'Picture 14.jpg', 'Picture 15.jpg','Picture 0.jpg', 'Picture 1.jpg', 'Picture 10.jpg', 'Picture 11.jpg', 'Picture 12.jpg', 'Picture 16.jpg', 'Picture 17.jpg', 'Picture 18.jpg', 'Picture 19.jpg', 'Picture 2.jpg', 'Picture 20.jpg', 'Picture 21.jpg', 'Picture 22.jpg', 'Picture 23.jpg', 'Picture 24.jpg', 'Picture 25.jpg', 'Picture 26.jpg', 'Picture 27.jpg', 'Picture 28.jpg', 'Picture 29.jpg', 'Picture 3.jpg', 'Picture 30.jpg', 'Picture 31.jpg', 'Picture 32.jpg', 'Picture 33.jpg', 'Picture 34.jpg', 'Picture 35.jpg', 'Picture 36.jpg', 'Picture 37.jpg'] >>> print(natsort.natsorted(ll,reverse=True)) ['Picture 37.jpg', 'Picture 36.jpg', 'Picture 35.jpg', 'Picture 34.jpg', 'Picture 33.jpg', 'Picture 32.jpg', 'Picture 31.jpg', 'Picture 30.jpg', 'Picture 29.jpg', 'Picture 28.jpg', 'Picture 27.jpg', 'Picture 26.jpg', 'Picture 25.jpg', 'Picture 24.jpg', 'Picture 23.jpg', 'Picture 22.jpg', 'Picture 21.jpg', 'Picture 20.jpg', 'Picture 19.jpg', 'Picture 18.jpg', 'Picture 17.jpg', 'Picture 16.jpg', 'Picture 15.jpg', 'Picture 14.jpg', 'Picture 13.jpg', 'Picture 12.jpg', 'Picture 11.jpg', 'Picture 10.jpg', 'Picture 3.jpg', 'Picture 2.jpg', 'Picture 1.jpg', 'Picture 0.jpg']的关闭按钮，因此单击内部模态关闭按钮也会触发初始模态的data-dismiss="modal"。

Fiddle

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

Fiddle working example

<强>原因

Bootstrap不支持data-dismiss="modal";

Overlapping modals not supported

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

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

所以如果你仍然希望将内部模态HTML保留在初始模态中，那么下面的代码将完成工作并解决问题

在内部模式HTML关闭按钮中，将stacked/simultaneous/overlapping modals更改为data-dismiss="modal"

data-dismiss-modal="modal2"

并添加以下代码

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

也许使用带有javascript代码的唯一HTML ID关闭内部模式：

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

Answer 3

先前解决方案的问题在于，第一个模态的行为在离开第二个模态后会发生变化！当您使用鼠标滚动时，您会发现它的工作原理不同，第一个模式已冻结！

像这样：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');
  });

});

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

3 个答案: