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

問題不在於模態，您有重復的兩個id's ，導致問題的原因是您在 HTML 中重復了模態id's ， Id's在整個文檔中必須是唯一的。

第一個 Modal 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's導致modal-backdrop在模態關閉時不會消失。

刪除這 2 個不必要的id's

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

和

id="myModalD"來自<div class="gallery" 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-->

小提琴工作示例

Answer 2

我也遇到了同樣的問題，Bootstrap 模式框沒有正確關閉。 問題在於模態框的“淡入淡出”動畫。

在

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

從模態類中刪除淡入淡出

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/