多个模态叠加 [英] Multiple modals overlay

问题描述

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

I need that the overlay shows above the first modal, not in the back.

$('#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-index > .modal-backdrop ，但它变得一团糟。

I tried to change the z-index of .modal-backdrop, but it becomes a mess.

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

In some cases I have more than two modals on the same page.

推荐答案

看到很多修复后，其中没有一个是我需要的，我想出了一个更短的解决方案，灵感来自 @YermoLamers & @Ketwaroo。

After seeing many fixes for this, and none of them were exactly what I needed I've came up with a even shorter solution that is inspired by @YermoLamers & @Ketwaroo.

背景z-index修复

此解决方案使用 setTimeout 因为事件 show.bs.modal .modal-backdrop $ c>被触发。

Backdrop z-index fix
This solution uses a setTimeout because the .modal-backdrop isn't created when the event show.bs.modal is triggered.

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

• 这适用于每个 .modal 在页面上创建（甚至是动态模态）


• 背景立即覆盖以前的模态


• This works for every .modal created on the page (even dynamic modals)
• The backdrop instantly overlays the previous modal

如果您不喜欢硬编码的z-index因为任何原因你可以在页面上计算最高的z-index ：

If you don't like the hardcoded z-index for any reason you can calculate the highest z-index on the page like this:

var zIndex = Math.max.apply(null, Array.prototype.map.call(document.querySelectorAll('*'), function(el) {
  return +el.style.zIndex;
})) + 10;

滚动条修复

如果您有模态在您的页面上超过浏览器高度，然后在关闭第二个模式时无法滚动它。要解决此问题，请添加：

Scrollbar fix
If you have a modal on your page that exceeds the browser height, then you can't scroll in it when closing an second modal. To fix this add:

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

版本

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

Versions
This solution is tested with bootstrap 3.1.0 - 3.3.5

这篇关于多个模态叠加的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！