Bootstrap 模态没有正确关闭（模态中的模态）

Question

我有一个引导模式 1，单击即可打开模式 2。我通过单击模态 1 关闭模态 2。然后模态 1 应该通过单击 X 关闭，它确实如此，但它使主页处于变暗状态，我必须刷新以清除它，那不好！几个小时以来，我一直试图弄清楚这一点，但无法解决。任何人都知道出了什么问题以及如何解决？我在 JS 或引导程序方面不是很有经验。我从 2 个不同的来源获得了这段代码，我正试图让它一起工作。代码如下...谢谢！

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

Answer 1

问题不在于模态，您重复了两个模态，导致问题的原因是您在 HTML 中id's重复模态，在整个文档中必须是唯一的。id'sId's

第一模态id="portfolioModal1"

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

id="portfolioModal1"并在模态 HTML 中再次重复第一个模态

<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's导致modal-backdrop模态关闭时不会消失。

删除这2个不必要的id's

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

和

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

并且模态工作正常，关闭模态时，背景将消失。

在JS代码中；

如果你想手动打开模态，那么

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

工作示例

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

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

小提琴工作示例

Answer 2

我也遇到了同样的问题，Bootstrap 模式框没有正确关闭。问题在于模态框的“淡入淡出”动画。

在

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

从模态类中删除淡入淡出