引导模态没有正确关闭(模态中的模态)

Bootstrap modal not closing correctly (modal in modal)

本文关键字：模态      更新时间：2023-09-26

我有一个引导模态1打开模态2点击。我通过点击模态1关闭模态2。然后点击X按钮关闭模态1，这样做了，但它使主页面处于黑暗状态，我必须刷新才能清除它，这不好!我花了好几个小时想弄明白这个问题，但还是搞不懂。有人知道什么是错的，如何解决它吗?我在JS或bootstrap方面不是很有经验。我从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>

我也面临同样的问题，Bootstrap模式框没有正确关闭。问题在于模态框的"淡出"动画。

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

Remove fade from modal class

问题不在于模态，您重复了两个id's，导致问题的原因是您在HTML中重复模态id's, Id's必须是UNIQUE贯穿整个文档。

第一模态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="myModalD"的id 

<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" from <div class="container" id="portfolioModal1">

和

id="myModalD" from <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);
});

工作示例

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

小提琴工作示例

尝试在"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/

相关文章：