多模态叠加

小编典典

多模态叠加

all

我需要覆盖显示在第一个模态上方，而不是在后面。

$('#openBtn').click(function(){

    $('#myModal').modal({show:true})

});


<a data-toggle="modal" href="#myModal" class="btn btn-primary">Launch modal</a>



<div class="modal" id="myModal">

    <div class="modal-dialog">

      <div class="modal-content">

        <div class="modal-header">

          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">脳</button>

          <h4 class="modal-title">Modal title</h4>

        </div><div class="container"></div>

        <div class="modal-body">

          Content for the dialog / modal goes here.

          <br>

          <br>

          <br>

          <br>

          <br>

          <a data-toggle="modal" href="#myModal2" class="btn btn-primary">Launch modal</a>

        </div>

        <div class="modal-footer">

          <a href="#" data-dismiss="modal" class="btn">Close</a>

          <a href="#" class="btn btn-primary">Save changes</a>

        </div>

      </div>

    </div>

</div>

<div class="modal" id="myModal2" data-backdrop="static">

    <div class="modal-dialog">

      <div class="modal-content">

        <div class="modal-header">

          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">脳</button>

          <h4 class="modal-title">Second Modal title</h4>

        </div><div class="container"></div>

        <div class="modal-body">

          Content for the dialog / modal goes here.

        </div>

        <div class="modal-footer">

          <a href="#" data-dismiss="modal" class="btn">Close</a>

          <a href="#" class="btn btn-primary">Save changes</a>

        </div>

      </div>

    </div>

</div>





<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.0/css/bootstrap.min.css" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.0/js/bootstrap.min.js"></script>

我试图改变z-indexof .modal-backdrop，但它变得一团糟。

在某些情况下，我在同一页面上有两个以上的模式。

阅读 69

2022-06-07

共1个答案

小编典典

受@YermoLamers 和@Ketwaroo 答案启发的解决方案。

背景 z-index 修复
此解决方案使用 a setTimeout，因为在触发.modal-backdrop事件时未创建。show.bs.modal

$(document).on('show.bs.modal', '.modal', function() {
  const zIndex = 1040 + 10 * $('.modal:visible').length;
  $(this).css('z-index', zIndex);
  setTimeout(() => $('.modal-backdrop').not('.modal-stack').css('z-index', zIndex - 1).addClass('modal-stack'));
});

这适用于.modal页面上创建的每个（甚至是动态模式）
背景立即覆盖了之前的模态

示例 jsfiddle

z-index
如果您出于任何原因不喜欢硬编码的 z-index，您可以计算页面上的最高 z-index，如下所示：

const zIndex = 10 +
  Math.max(...Array.from(document.querySelectorAll('*')).map((el) => +el.style.zIndex));

滚动条修复
如果您的页面上有一个超过浏览器高度的模态框，那么在关闭第二个模态框时您将无法在其中滚动。要解决此问题，请添加：

$(document).on('hidden.bs.modal', '.modal',
  () => $('.modal:visible').length && $(document.body).addClass('modal-open'));

版本
此解决方案已使用 bootstrap 3.1.0 - 3.3.5 进行测试

2022-06-07