Bootstrap模态框无法正确关闭（嵌套模态框）

Question

我有一个使用Bootstrap的模态框1，它在单击时打开模态框2。我通过单击模态框1来关闭模态框2。然后，再次单击X关闭模态框1。虽然模态框1已经关闭了，但主页面仍处于黑暗状态，我必须刷新才能清除它，这不好！我已经尝试了几个小时，但还是无法解决问题。有人知道问题出在哪里以及如何解决吗？我对JS或Bootstrap并不是很熟悉。我从两个不同的来源获取了此代码，并尝试使它们共同工作。以下是代码...谢谢！

<div class="portfolio-modal modal fade" id="portfolioModal1" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-content">
        <div class="close-modal" data-dismiss="modal">
            <div class="lr">
                <div class="rl"></div>
            </div>
        </div>
        <div class="container" id="portfolioModal1">
            <div class="gallery" id="myModalD">
                <!-- Project Details Go Here -->
                <ul>
                    <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
                        <img src="img/portfolio/campos/resized/sh21.jpg" class="img-responsive">
                    </li>
                </ul>
            </div>
            <!--gallery1 end-->
        </div>
        <div class="modal fade" id="myModalD" tabindex="-1" role="dialog" aria- labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-body"></div>
                </div>
                <!-- /.modal-content -->
            </div>
            <!-- /.modal-dialog -->
        </div>
        <!-- /.modal -->
    </div>
</div>
<!--container end-->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria- labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body"></div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<!-- /.modal -->
</div>
</div>
<button type="button" class="btn btn-primary" data-dismiss="modal"> <i class="fa fa-times"></i> Close Project</button>
</div>
</div>
</div>
</div>
</div>
</div>

图库JS

  <!--custom 2nd modal-->
  <script type="text/javascript">
  $(document).ready(function () {
      $('li img').on('click', function () {
          var src = $(this).attr('src');
          var img = '<img src="' + src + '" class="img-responsive"/>';
          $('#myModalD').modal();
          $('#myModalD').on('shown.bs.modal', function () {
              $('#myModalD .modal-body').html(img);
          });
          $('#myModalD').on('hidden.bs.modal', function () {
              $('#myModalD .modal-body').html('');
          });
      });
  })
  </script> 

- Barbara

---

https://dev59.com/S2Ik5IYBdhLWcg3wadcD - J Santosh

在Fiddle上重现问题。 - J Santosh

Answer 1

我也遇到了同样的问题，即Bootstrap模态框未能正确关闭。

问题出在模态框的“fade”动画上。

在

<div class="portfolio-modal modal fade" id="portfolioModal1" tabindex="-1" role="dialog" aria-hidden="true">

移除模态框类中的淡入淡出效果

- jagadish sivakumar

Answer 2

问题不在于模态框，而是您重复了两个id，并且导致问题的原因是您在HTML中重复使用模态框的id，id必须在整个文档中是唯一的。第一个模态框的id为"portfolioModal1"。

<div class="portfolio-modal modal fade" id="portfolioModal1" tabindex="-1" role="dialog" aria-hidden="true">

在模态框HTML中重复第一个模态框的id="portfolioModal1"

<div class="container" id="portfolioModal1">

在上面的HTML代码之后，您再次重复使用了id="myModalD"。

<div class="gallery" id="myModalD">

这基本上是第二个模态框的 id，即 id = "myModalD"

<div class="modal fade" id="myModalD" tabindex="-1" role="dialog" aria- labelledby="myModalLabel" aria-hidden="true">

这些重复的模态窗口id会造成关闭模态窗口时无法去掉遮罩层。

请移除以下2个不必要的id：

1.从

中删除id="portfolioModal1" 2.从

中删除id="myModalD"

这样一来，模态窗口就能正常工作，并且在关闭模态窗口时，遮罩层也会消失。

在JS代码中，如果您想手动打开一个模态窗口，请参阅modal。

$('#myModalD').modal('show');

不只是 $('#myModalD').modal()，虽然它能够运行，但并非所有的浏览器都很友好或忽略这个操作。

您还可以像以下方式添加模态框事件监听器，这是更好的做法。

$('#myModalD').modal('show').on('shown.bs.modal', function () {
            $('#myModalD .modal-body').html(img);
});

相反地

$('#myModalD').modal("show");
$('#myModalD').on('shown.bs.modal', function () {
      $('#myModalD .modal-body').html(img);
});

工作示例

$(document).ready(function () {
    $('li img').on('click', function () {
        var src = $(this).attr('src');
        var img = '<img src="' + src + '" class="img-responsive"/>';
        $('#myModalD').modal("show").on('shown.bs.modal', function () {
            $('#myModalD .modal-body').html(img);
        });
        $('#myModalD').on('hidden.bs.modal', function () {
            $('#myModalD .modal-body').html('');
        });
    });
});

<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="#portfolioModal1">Open Modal</button>
<div class="portfolio-modal modal fade" id="portfolioModal1" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-content">
        <div class="close-modal" data-dismiss="modal">
            <div class="lr">
                <div class="rl"></div>
            </div>
        </div>
        <div class="container">
            <div class="gallery">
                <!-- Project Details Go Here -->
                <ul>
                    <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
                        <img src="http://tympanus.net/Tutorials/CaptionHoverEffects/images/1.png" class="img-responsive">
                    </li>
                </ul>
            </div>
            <!--gallery1 end-->
        </div>
        <div class="modal fade" id="myModalD" tabindex="-1" role="dialog" aria- labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-body"></div>
                </div>
                <!-- /.modal-content -->
            </div>
            <!-- /.modal-dialog -->
        </div>
        <!-- /.modal -->
    </div>
</div>
<!--container end-->

Fiddle工作示例

- Shehary

---

抱歉，我没有完成我的评论！1)当模态框出现时，它周围没有阴影，所以看起来不对劲，不太确定为什么会发生这种情况。2)我还有5个相同的模态框，其中包含不同类别的图像，我需要让它们工作。当然，当我尝试添加它们时，由于id相同，它们具有相同的覆盖问题。因此，我给它一个单独的id，但是js需要更新，这超出了我的水平！因此，现在网站上的id是相同的（http://www.campos-schug.com）。请查看其功能。你能帮忙吗？ - Barbara

我会调查一下并回复您。 - Shehary

你的模态框中缺少 <div class="modal-dialog">，在 <div class="modal-content"> 之前加上 <div class="modal-dialog"> 即可解决第一个没有阴影的问题。 - Shehary

我已经添加了它，现在图像正在模态框外延伸。 - Barbara

这是您要找的吗？http://shehary.com/stackoverflow/multiplemodals.html - Shehary

Answer 3

尝试在"data-bs-dismiss"中包含bs

<div class="modal-footer">
 <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">No</button>
 <button type="submit" name="deletedata" class="btn btn-primary">Yes, Delete</button>
</div>

请在此处查看详细信息：https://getbootstrap.com/docs/5.0/components/modal/

- Michael Adenson