我需要覆盖显示以上的第一个模式,而不是在后面。

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

我试图改变。modal- background的z索引,但它变得一团糟。

在某些情况下,我在同一页上有两个以上的情态动词。


当前回答

解决方案灵感来自@YermoLamers和@Ketwaroo的回答。

背景z指数修正 这个解决方案使用setTimeout,因为当事件show.bs.modal被触发时,.modal- background不会被创建。

$(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指数,你可以计算页面上的最高z指数,如下所示:

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'));

版本 这个解决方案是用3.1.0 - 3.3.5引导程序测试的

其他回答

我也遇到过类似的情况,经过一番研究,我找到了一个解决方案。虽然我不擅长JS,但我还是设法写下了一个小查询。

http://jsfiddle.net/Sherbrow/ThLYb/

<div class="ingredient-item" data-toggle="modal" data-target="#myModal">test1 <p>trerefefef</p></div>
<div class="ingredient-item" data-toggle="modal" data-target="#myModal">tst2 <p>Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum</p></div>
<div class="ingredient-item" data-toggle="modal" data-target="#myModal">test3 <p>afsasfafafsa</p></div>

<!-- Modal -->
<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-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>





$('.ingredient-item').on('click', function(e){

   e.preventDefault();

    var content = $(this).find('p').text();

    $('.modal-body').html(content);

});
$(window).scroll(function(){
    if($('.modal.in').length && !$('body').hasClass('modal-open'))
    {
              $('body').addClass('modal-open');
    }

});

Bootstrap 4.5的简单解决方案

.modal.fade {
  background: rgba(0, 0, 0, 0.5);
}

.modal-backdrop.fade {
  opacity: 0;
}

我意识到一个答案已经被接受,但我强烈建议不要破解bootstrap来解决这个问题。

通过连接show .bs.modal和hidden.bs.modal事件处理程序并在那里调整z-index,可以很容易地达到同样的效果。

下面是一个工作示例

更多信息可以在这里找到。

这个解决方案自动工作于任意深度的堆栈模态。

脚本源代码:

$(document).ready(function() {

    $('.modal').on('hidden.bs.modal', function(event) {
        $(this).removeClass( 'fv-modal-stack' );
        $('body').data( 'fv_open_modals', $('body').data( 'fv_open_modals' ) - 1 );
    });

    $('.modal').on('shown.bs.modal', function (event) {
        // keep track of the number of open modals
        if ( typeof( $('body').data( 'fv_open_modals' ) ) == 'undefined' ) {
            $('body').data( 'fv_open_modals', 0 );
        }

        // if the z-index of this modal has been set, ignore.
        if ($(this).hasClass('fv-modal-stack')) {
            return;
        }

        $(this).addClass('fv-modal-stack');
        $('body').data('fv_open_modals', $('body').data('fv_open_modals' ) + 1 );
        $(this).css('z-index', 1040 + (10 * $('body').data('fv_open_modals' )));
        $('.modal-backdrop').not('.fv-modal-stack').css('z-index', 1039 + (10 * $('body').data('fv_open_modals')));
        $('.modal-backdrop').not('fv-modal-stack').addClass('fv-modal-stack'); 

    });        
});

基于这个答案的例子,我更新了它,以支持引导3和4,并修复了评论中提到的所有问题。因为我也注意到它们,因为我有一些模态有一个超时和自动关闭。

它将不能与bootstrap 5一起工作。引导5不存储b。Modal对象不再使用node.data('bs.modal')。

我建议全屏查看代码片段。

使用与前面提到的答案相同的例子引导3,只是对话4被修改了。

!function () { var z = "bs.modal.z-index.base", re_sort = function (el) { Array.prototype.slice.call($('.modal.show,.modal.in').not(el)) .sort(function (a, b) { // sort by z-index lowest to highest return +a.style.zIndex - +b.style.zIndex }) .forEach(function (el, idx) { // re-set the z-index based on the idx el.style.zIndex = $(el).data(z) + (2 * idx); const b = $(el).data('bs.modal')._backdrop || $(el).data("bs.modal").$backdrop; if (b) { $(b).css("z-index", +el.style.zIndex - 1); } }); }; $(document).on('show.bs.modal', '.modal', function (e) { // removing the currently set zIndex if any this.style.zIndex = ''; /* * should be 1050 always, if getComputedStyle is not supported use 1032 as variable... * * see https://getbootstrap.com/docs/4.0/layout/overview/#z-index and adjust the * other values to higher ones, if required * * Bootstrap 3: https:////netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.css .modal { [...] z-index: 1050; [...] } .modal-backdrop { [...] z-index: 1040; [...] } * Bootstrap 4: https://getbootstrap.com/docs/4.0/layout/overview/#z-index * * * lowest value which doesn't interfer with other bootstrap elements * since we manipulate the z-index of the backdrops too we need two for each modal * using 1032 you could open up to 13 modals without overlapping popovers */ if (!$(this).data(z)) { let def = +getComputedStyle(this).zIndex; // 1050 by default def = 1032; $(this).data(z, def); } // resort all others, except this re_sort(this); // 2 is fine 1 layer for the modal, 1 layer for the backdrop var zIndex = $(this).data(z) + (2 * $('.modal.show,.modal.in').not(this).length); e.target.style.zIndex = zIndex; /* * Bootstrap itself stores the var using jQuery data property the backdrop * is present there, even if it may not be attached to the DOM * * If it is not present, wait for it, using requestAnimationFrame loop */ const waitForBackdrop = function () { try { // can fail to get the config if the modal is opened for the first time const config = $(this).data('bs.modal')._config || $(this).data('bs.modal').options; if (config.backdrop != false) { const node = $(this).data('bs.modal')._backdrop || $(this).data("bs.modal").$backdrop; if (node) { $(node).css('z-index', +this.style.zIndex - 1); } else { window.requestAnimationFrame(waitForBackdrop); } } } catch (e) { window.requestAnimationFrame(waitForBackdrop); } }.bind(this); waitForBackdrop(); }); $(document).on("shown.bs.modal", ".modal", function () { re_sort(); }); $(document).on('hidden.bs.modal', '.modal', function (event) { this.style.zIndex = ''; // when hidden, remove the z-index if (this.isConnected) { const b = $(this).data('bs.modal')._backdrop || $(this).data("bs.modal").$backdrop; if (b) { $(b).css("z-index", ''); } } re_sort(); // if still backdrops are present at dom - readd modal-open if ($('.modal-backdrop.show,.modal-backdrop.in').length) $(document.body).addClass("modal-open"); }) }(); /* crazy batman newspaper spinny thing */ .rotate { transform:rotate(180deg); transition:all 0.25s; } .rotate.in { transform:rotate(1800deg); transition:all 0.75s; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script> <link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet"/> <h2>Stacked Bootstrap Modal Example.</h2> <a data-toggle="modal" href="#myModal" class="btn btn-primary">Launch modal</a> <div class="modal fade" 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 1</h4> </div> <div class="container"></div> <div class="modal-body">Content for the dialog / modal goes here. <br> <br> <br> <p>more content</p> <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 fade rotate" id="myModal2"> <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 2</h4> </div> <div class="container"></div> <div class="modal-body">Content for the dialog / modal goes here. <br> <br> <p>come content</p> <br> <br> <br> <a data-toggle="modal" href="#myModal3" 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 fade" id="myModal3"> <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 3</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="#myModal4" 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 fade" id="myModal4"> <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 4</h4> </div> <div class="container"></div> <div class="modal-body"> <button onclick="$('#myModal').modal('hide');" class="btn btn-primary">hide #1</button> <button onclick="$('#myModal').modal('show');" class="btn btn-primary">show #1</button> <br> <button onclick="$('#myModal2').modal('hide');" class="btn btn-primary">hide #2</button> <button onclick="$('#myModal2').modal('show');" class="btn btn-primary">show #2</button> <br> <button onclick="$('#myModal3').modal('hide');" class="btn btn-primary">hide #3</button> <button onclick="$('#myModal3').modal('show');" class="btn btn-primary">show #3</button> </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>

Bootstrap 4 (see Bootstrap 3 snippet for commented code) !function () { var z = "bs.modal.z-index.base", re_sort = function (el) { Array.prototype.slice.call($('.modal.show,.modal.in').not(el)) .sort(function (a, b) { return +a.style.zIndex - +b.style.zIndex }) .forEach(function (el, idx) { el.style.zIndex = $(el).data(z) + (2 * idx); const b = $(el).data('bs.modal')._backdrop || $(el).data("bs.modal").$backdrop; if (b) { $(b).css("z-index", +el.style.zIndex - 1); } }); }; $(document).on('show.bs.modal', '.modal', function (e) { this.style.zIndex = ''; if (!$(this).data(z)) { let def = +getComputedStyle(this).zIndex; def = 1032; $(this).data(z, def); } re_sort(this); var zIndex = $(this).data(z) + (2 * $('.modal.show,.modal.in').not(this).length); e.target.style.zIndex = zIndex; const waitForBackdrop = function () { try { const config = $(this).data('bs.modal')._config || $(this).data('bs.modal').options; if (config.backdrop != false) { const node = $(this).data('bs.modal')._backdrop || $(this).data("bs.modal").$backdrop; if (node) { $(node).css('z-index', +this.style.zIndex - 1); } else { window.requestAnimationFrame(waitForBackdrop); } } } catch (e) { window.requestAnimationFrame(waitForBackdrop); } }.bind(this); waitForBackdrop(); }); $(document).on("shown.bs.modal", ".modal", function () { re_sort(); }); $(document).on('hidden.bs.modal', '.modal', function (event) { this.style.zIndex = ''; if (this.isConnected) { const b = $(this).data('bs.modal')._backdrop || $(this).data("bs.modal").$backdrop; if (b) { $(b).css("z-index", ''); } } re_sort(); if ($('.modal-backdrop.show,.modal-backdrop.in').length) $(document.body).addClass("modal-open"); }) }(); // creates dynamic modals i used this for stuff like // `enterSomething('stuff','to','display').then(...)` !function() { let a = (i, a) => Array.prototype.forEach.call(a, (e) => $('#' + i + '-modal').find('.modal-body').append(e)), b = function () { $(this).remove() }, c = (i, a) => Array.prototype.forEach.call(a, (e) => $('#' + i + '-modal-text-container').append(e)), r = () => 'dialog-' + (Date.now() + '-' + Math.random()).replace('.', '-'); this.createModal = function createModal() { let id = r(); $(document.body).append('<div class="modal fade" tabindex="-1" role="dialog" data-backdrop="static" aria-hidden="true" id="' + id + '-modal"><div class="modal-dialog d-flex modal-xl"><div class="modal-content align-self-stretch" style="overflow: hidden; max-height: -webkit-fill-available;"><div class="modal-header py-1"><h5 class="modal-header-text p-0 m-0"></h5><button id="' + id + '-modal-btn-close" type="button" tabindex="-1" class="close" data-dismiss="modal" aria-label="Close" title="Close"><span aria-hidden="true">&times;</span></button></div><div class="modal-body py-2"></div><div class="modal-footer py-1"><button type="button" class="btn btn-primary btn-sm" id="' + id + '-modal-btn-ok">Okay</button></div></div></div></div>'); $('#' + id + '-modal-btn-ok').on('click', () => $('#' + id + '-modal').modal('hide')); $('#' + id + '-modal').on('shown.bs.modal', () => $('#' + id + '-modal-btn-ok').focus()).on('hidden.bs.modal', b).modal('show'); $('#' + id + '-modal').find(".modal-header-text").html("Title"); a(id, arguments); return new Promise((r) => $('#' + id + '-modal').on('hide.bs.modal', () => r())); } }(); function another() { createModal( $("<button class='btn mx-1'>Another...</button>").on("click", another), $("<button class='btn mx-1'>Close lowest</button>").on("click", closeLowest), $("<button class='btn mx-1'>Bring lowest to front</button>").on("click", lowestToFront), $("<p>").text($(".modal.show,.modal.in").length) ).then(() => console.log("modal closed")); // only for this example: $(".modal").last().css('padding-top', ($(".modal.show,.modal.in").length * 20) +'px'); } function closeLowest() { $(Array.prototype.slice.call($('.modal.show,.modal.in')) .sort(function (a, b) { // sort by z-index lowest to highest return +a.style.zIndex - +b.style.zIndex })).first().modal('hide'); } function lowestToFront() { $(Array.prototype.slice.call($('.modal.show,.modal.in')) .sort(function (a, b) { // sort by z-index lowest to highest return +a.style.zIndex - +b.style.zIndex })).first().trigger('show.bs.modal'); } another(); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> <p>Use inspecter to check z-index values</p> <button class="btn btn-outline-primary" onclick="another()">Click!</button>