228

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

后面的模态叠加

$('#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,但它变得一团糟。

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

4

34 回答 34

520

受@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 进行测试

于 2014-07-23T15:31:55.957 回答
88

我意识到答案已被接受,但我强烈建议不要破解引导程序来解决此问题。

您可以通过挂钩显示的.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'); 

    });        
});
于 2014-02-16T21:18:32.307 回答
27

结合 A1rPun 的回答和 StriplingWarrior 的建议,我想出了这个:

$(document).on({
    'show.bs.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);
    },
    'hidden.bs.modal': function() {
        if ($('.modal:visible').length > 0) {
            // restore the modal-open class to the body element, so that scrolling works
            // properly after de-stacking a modal.
            setTimeout(function() {
                $(document.body).addClass('modal-open');
            }, 0);
        }
    }
}, '.modal');

甚至适用于事后添加的动态模式,并消除了第二个滚动条问题。我发现这有用的最值得注意的事情是将模态中的表单与来自 Bootbox 警报的验证反馈集成,因为这些使用动态模态,因此需要您将事件绑定到文档而不是 .modal,因为这只会将它附加到现有的模态。

在这里拉小提琴。

于 2014-09-22T19:38:43.207 回答
26

根据 Yermo Lamers 的建议,一些较短的版本似乎可以正常工作。即使有基本的动画,如淡入/淡出,甚至疯狂的蝙蝠侠报纸旋转。http://jsfiddle.net/ketwaroo/mXy3E/

$('.modal').on('show.bs.modal', function(event) {
    var idx = $('.modal:visible').length;
    $(this).css('z-index', 1040 + (10 * idx));
});
$('.modal').on('shown.bs.modal', function(event) {
    var idx = ($('.modal:visible').length) -1; // raise backdrop after animation.
    $('.modal-backdrop').not('.stacked').css('z-index', 1039 + (10 * idx));
    $('.modal-backdrop').not('.stacked').addClass('stacked');
});
于 2014-04-15T16:19:51.487 回答
17

Bootstrap 4.5 的简单解决方案

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

.modal-backdrop.fade {
  opacity: 0;
}
于 2020-08-18T17:29:06.267 回答
13

我创建了一个 Bootstrap 插件,其中包含了此处发布的许多想法。

Bootply 演示:http: //www.bootply.com/cObcYInvpq

Github:https ://github.com/jhaygt/bootstrap-multimodal

它还解决了连续模态导致背景变得越来越暗的问题。这可确保在任何给定时间只有一个背景可见:

if(modalIndex > 0)
    $('.modal-backdrop').not(':first').addClass('hidden');

可见背景的 z-index 在show.bs.modalhidden.bs.modal事件上更新:

$('.modal-backdrop:first').css('z-index', MultiModal.BASE_ZINDEX + (modalIndex * 20));
于 2015-12-10T21:29:03.767 回答
11

当解决堆叠模式在关闭时滚动主页时​​,我发现较新版本的 Bootstrap(至少从 3.0.3 版开始)不需要任何额外的代码来堆叠模式。

您可以向页面添加多个模式(当然具有不同的 ID)。打开多个模式时发现的唯一问题是关闭一个会删除modal-open主体选择器的类。

您可以使用以下 Javascript 代码重新添加modal-open

$('.modal').on('hidden.bs.modal', function (e) {
    if($('.modal').hasClass('in')) {
    $('body').addClass('modal-open');
    }    
});

在不需要堆叠模态的背景效果的情况下可以设置data-backdrop="false"

版本 3.1.1。修复了覆盖模态滚动条的模态背景,但上述解决方案似乎也适用于早期版本。

于 2014-12-09T14:59:17.233 回答
9

如果您正在寻找 Bootstrap 4 解决方案,有一个使用纯 CSS 的简单解决方案:

.modal.fade {
    background: rgba(0,0,0,0.5);
}
于 2019-01-22T06:03:21.917 回答
8

终于解决了。我以多种方式对其进行了测试,并且工作正常。

这是任何有相同问题的人的解决方案:更改Modal.prototype.show函数(在 bootstrap.js 或 modal.js 中)

从:

if (transition) {
   that.$element[0].offsetWidth // force reflow
}   

that.$element
   .addClass('in')
   .attr('aria-hidden', false)

that.enforceFocus()

到:

if (transition) {
    that.$element[0].offsetWidth // force reflow
}

that.$backdrop
   .css("z-index", (1030 + (10 * $(".modal.fade.in").length)))

that.$element
   .css("z-index", (1040 + (10 * $(".modal.fade.in").length)))
   .addClass('in')
   .attr('aria-hidden', false)

that.enforceFocus()

这是我发现的最好方法:检查打开了多少模态并将模态的 z-index 和背景更改为更高的值。

于 2013-10-11T15:00:56.447 回答
4

尝试在 bootply 上将以下内容添加到您的 JS

$('#myModal2').on('show.bs.modal', function () {  
$('#myModal').css('z-index', 1030); })

$('#myModal2').on('hidden.bs.modal', function () {  
$('#myModal').css('z-index', 1040); })

解释:

在玩弄了这些属性之后(使用 Chrome 的开发工具),我意识到z-index下面的任何值1031都会把事情放在背景后面。

因此,通过使用引导程序的模式事件句柄,我z-index1030. 如果#myModal2显示并将z-index后面设置为1040如果#myModal2隐藏。

演示

于 2013-10-10T21:12:11.303 回答
4

我的 bootstrap 4 解决方案,使用无限深度的模态和动态模态。

$('.modal').on('show.bs.modal', function () {
    var $modal = $(this);
    var baseZIndex = 1050;
    var modalZIndex = baseZIndex + ($('.modal.show').length * 20);
    var backdropZIndex = modalZIndex - 10;
    $modal.css('z-index', modalZIndex).css('overflow', 'auto');
    $('.modal-backdrop.show:last').css('z-index', backdropZIndex);
});
$('.modal').on('shown.bs.modal', function () {
    var baseBackdropZIndex = 1040;
    $('.modal-backdrop.show').each(function (i) {
        $(this).css('z-index', baseBackdropZIndex + (i * 20));
    });
});
$('.modal').on('hide.bs.modal', function () {
    var $modal = $(this);
    $modal.css('z-index', '');
});
于 2020-03-06T10:27:11.427 回答
4

A1rPun 的答案在稍作修改后完美运行(Bootstrap 4.6.0)。我的声誉不允许我发表评论,所以我会发布答案。

我只是替换了每个.modal:visiblefor .modal.show

因此,要在打开多个模式时修复背景:

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

并且,要修复滚动条:

$(document).on('hidden.bs.modal', '.modal', function () {
    $('.modal.show').length && $(document.body).addClass('modal-open');
});
于 2021-08-03T21:42:07.083 回答
2

注意: 所有答案都是“黑客”,因为 Bootstrap 不正式支持多种模式。

“Bootstrap 一次只支持一个模式窗口。不支持嵌套模式,因为我们认为它们是糟糕的用户体验。”

这里有一些CSS变通办法/黑客...

Bootstrap 5 测试版(2021 年更新)

modals 的默认 z-index 再次更改为 1060。因此,要覆盖 modals 和背景使用..

.modal:nth-of-type(even) {
    z-index: 1062 !important;
}
.modal-backdrop.show:nth-of-type(even) {
    z-index: 1061 !important;
}

https://codeply.com/p/yNgonlFihM


Bootstrap 4 中模态的 z-index 再次更改为 1050。因此,要覆盖打开的模态和背景使用。

引导程序 4.x(2018 年更新)

.modal:nth-of-type(even) {
    z-index: 1052 !important;
}
.modal-backdrop.show:nth-of-type(even) {
    z-index: 1051 !important;
}

https://codeply.com/p/29sH0ofTZb


Bootstrap 3.x(原始答案)

这是一些使用选择器的 CSSnth-of-type似乎可以工作:

    .modal:nth-of-type(even) {
        z-index: 1042 !important;
    }
    .modal-backdrop.in:nth-of-type(even) {
        z-index: 1041 !important;
    }

https://codeply.com/p/w8yjOM4DFb

于 2013-10-10T21:29:24.873 回答
2

每次运行 sys.showModal 函数时都会增加 z-index 并将其设置为新的模态。

function system() {

    this.modalIndex = 2000;

    this.showModal = function (selector) {
        this.modalIndex++;

        $(selector).modal({
            backdrop: 'static',
            keyboard: true
        });
        $(selector).modal('show');
        $(selector).css('z-index', this.modalIndex );       
    }

}

var sys = new system();

sys.showModal('#myModal1');
sys.showModal('#myModal2');
于 2014-09-21T09:35:38.967 回答
2

对我来说,解决方案是不要在我的模态 div 上使用“淡入淡出”类。

于 2015-08-05T17:24:10.497 回答
2

没有脚本解决方案,如果你有两层模态,只使用 css,将第二个模态设置为更高的 z 索引

.second-modal { z-index: 1070 }

div.modal-backdrop + div.modal-backdrop {
   z-index: 1060; 
}
于 2017-12-29T17:32:57.407 回答
2

如果您希望特定模态出现在另一个打开的模态之上,请尝试在另一个模态之后div添加最顶层模态的 HTML 。

这对我有用:

<div id="modal-under" class="modal fade" ... />

<!--
This modal-upper should appear on top of #modal-under when both are open.
Place its HTML after #modal-under. -->
<div id="modal-upper" class="modal fade" ... />
于 2019-08-13T15:04:45.397 回答
1

每个模态应该有一个不同的 id,每个链接应该定位到一个不同的模态 id。所以它应该是这样的:

<a href="#myModal" data-toggle="modal">
...
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"></div>
...
<a href="#myModal2" data-toggle="modal">
...
<div id="myModal2" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"></div>
...
于 2014-12-15T10:45:22.303 回答
1

编辑:Bootstrap 3.3.4 已经解决了这个问题(和其他模态问题),所以如果你可以更新你的引导 CSS 和 JS,那将是最好的解决方案。如果您无法更新下面的解决方案仍然可以工作,并且基本上与引导程序 3.3.4 做同样的事情(重新计算并应用填充)。

正如 Bass Jobsen 所指出的,较新版本的 Bootstrap 解决了 z-index 问题。modal-open 类和 padding-right 对我来说仍然是个问题,但是这个受 Yermo Lamers 解决方案启发的脚本解决了它。只需将其放入您的 JS 文件中即可享受。

$(document).on('hide.bs.modal', '.modal', function (event) {
    var padding_right = 0;
    $.each($('.modal'), function(){
        if($(this).hasClass('in') && $(this).modal().data('bs.modal').scrollbarWidth > padding_right) {
            padding_right = $(this).modal().data('bs.modal').scrollbarWidth
        }
    });
    $('body').data('padding_right', padding_right + 'px');
});

$(document).on('hidden.bs.modal', '.modal', function (event) {
    $('body').data('open_modals', $('body').data('open_modals') - 1);
    if($('body').data('open_modals') > 0) {
        $('body').addClass('modal-open');
        $('body').css('padding-right', $('body').data('padding_right'));
    }
});

$(document).on('shown.bs.modal', '.modal', function (event) {
    if (typeof($('body').data('open_modals')) == 'undefined') {
        $('body').data('open_modals', 0);
    }
    $('body').data('open_modals', $('body').data('open_modals') + 1);
    $('body').css('padding-right', (parseInt($('body').css('padding-right')) / $('body').data('open_modals') + 'px'));
});
于 2015-03-16T21:38:38.713 回答
1

为打开/关闭多模式工作

jQuery(function()
{
    jQuery(document).on('show.bs.modal', '.modal', function()
    {
        var maxZ = parseInt(jQuery('.modal-backdrop').css('z-index')) || 1040;

        jQuery('.modal:visible').each(function()
        {
            maxZ = Math.max(parseInt(jQuery(this).css('z-index')), maxZ);
        });

        jQuery('.modal-backdrop').css('z-index', maxZ);
        jQuery(this).css("z-index", maxZ + 1);
        jQuery('.modal-dialog', this).css("z-index", maxZ + 2);
    });

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

           var maxZ = 1040;

           jQuery('.modal:visible').each(function()
           {
               maxZ = Math.max(parseInt(jQuery(this).css('z-index')), maxZ);
           });

           jQuery('.modal-backdrop').css('z-index', maxZ-1);
       }
    });
});

演示

https://www.bootply.com/cObcYInvpq#

于 2015-10-11T00:20:46.370 回答
1

看一下这个!这个解决方案为我解决了这个问题,几个简单的 CSS 行:

.modal:nth-of-type(even) {
z-index: 1042 !important;
}
.modal-backdrop.in:nth-of-type(even) {
    z-index: 1041 !important;
}

这是我找到它的链接:Bootply 只需确保需要出现在 Top 上的 .modual 在 HTML 代码中排在第二位,这样 CSS 就可以将其查找为“偶数”。

于 2017-09-10T17:14:07.760 回答
1

对我来说,这些简单的 scss 规则非常有效:

.modal.show{
  z-index: 1041;
  ~ .modal.show{
    z-index: 1043;
  }
}
.modal-backdrop.show {
  z-index: 1040;
  + .modal-backdrop.show{
    z-index: 1042;
  }
}

如果这些规则导致错误的模态在您的情况下位于顶部,请更改模态 div 的顺序,或者将上述 scss 中的(奇数)更改为(偶数)。

于 2019-05-02T07:39:24.407 回答
1

基于此答案的示例小提琴,我对其进行了更新以支持引导程序 3 和 4,并修复了评论中提到的所有问题。我也注意到了它们,因为我有一些模式会超时并自动关闭。

它不适用于 bootstrap 5。Bootstrap 5bs.modal不再使用node.data('bs.modal').

我建议,全屏查看片段。

Bootstrap 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(注释代码见 Bootstrap 3 片段)

!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>

于 2021-09-03T13:50:58.100 回答
0

我也有类似的情况,经过一点点的研发,我找到了解决方案。虽然我在 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);

});
于 2014-04-05T09:48:52.580 回答
0

在 modal.js 中添加全局变量

var modalBGIndex = 1040; // modal backdrop background
var modalConIndex = 1042; // modal container data 

// 在添加变量中显示函数 - Modal.prototype.backdrop

var e    = $.Event('show.bs.modal', { relatedTarget: _relatedTarget })

modalConIndex = modalConIndex + 2; // add this line inside "Modal.prototype.show"

that.$element
    .show()
    .scrollTop(0)
that.$element.css('z-index',modalConIndex) // add this line after show modal 

if (this.isShown && this.options.backdrop) {
      var doAnimate = $.support.transition && animate

      modalBGIndex = modalBGIndex + 2; // add this line increase modal background index 2+

this.$backdrop.addClass('in')
this.$backdrop.css('z-index',modalBGIndex) // add this line after backdrop addclass
于 2014-06-27T06:31:23.777 回答
0

开箱即用的其他解决方案对我不起作用。我想可能是因为我使用的是更新版本的 Bootstrap (3.3.2).... 覆盖出现在模态对话框 的顶部。

我稍微重构了代码并注释掉了调整模态背景的部分。这解决了这个问题。

    var $body = $('body');
    var OPEN_MODALS_COUNT = 'fv_open_modals';
    var Z_ADJUSTED = 'fv-modal-stack';
    var defaultBootstrapModalZindex = 1040;

    // keep track of the number of open modals                   
    if ($body.data(OPEN_MODALS_COUNT) === undefined) {
        $body.data(OPEN_MODALS_COUNT, 0);
    }

    $body.on('show.bs.modal', '.modal', function (event)
    {
        if (!$(this).hasClass(Z_ADJUSTED))  // only if z-index not already set
        {
            // Increment count & mark as being adjusted
            $body.data(OPEN_MODALS_COUNT, $body.data(OPEN_MODALS_COUNT) + 1);
            $(this).addClass(Z_ADJUSTED);

            // Set Z-Index
            $(this).css('z-index', defaultBootstrapModalZindex + (1 * $body.data(OPEN_MODALS_COUNT)));

            //// BackDrop z-index   (Doesn't seem to be necessary with Bootstrap 3.3.2 ...)
            //$('.modal-backdrop').not( '.' + Z_ADJUSTED )
            //        .css('z-index', 1039 + (10 * $body.data(OPEN_MODALS_COUNT)))
            //        .addClass(Z_ADJUSTED);
        }
    });
    $body.on('hidden.bs.modal', '.modal', function (event)
    {
        // Decrement count & remove adjusted class
        $body.data(OPEN_MODALS_COUNT, $body.data(OPEN_MODALS_COUNT) - 1);
        $(this).removeClass(Z_ADJUSTED);
        // Fix issue with scrollbar being shown when any modal is hidden
        if($body.data(OPEN_MODALS_COUNT) > 0)
            $body.addClass('modal-open');
    });

附带说明一下,如果您想在 AngularJs 中使用它,只需将代码放在模块的 .run() 方法中即可。

于 2015-02-25T17:34:50.327 回答
0

在我的情况下,问题是由包含 bootstrap.js 文件的浏览器扩展引起的,其中显示事件处理了两次并modal-backdrop添加了两个 div,但是在关闭模式时,只删除了其中一个。

发现通过在chrome中给body元素添加子树修改断点,并跟踪添加了modal-backdropdiv。

于 2017-04-26T13:45:26.430 回答
0
$(window).scroll(function(){
    if($('.modal.in').length && !$('body').hasClass('modal-open'))
    {
              $('body').addClass('modal-open');
    }

});
于 2017-08-30T09:56:00.810 回答
0

更新:22.01.2019, 13.41 我优化了 jhay 的解决方案,它还支持关闭和打开相同或不同的对话框,例如从一个详细数据向前或向后步进到另一个。

(function ($, window) {
'use strict';

var MultiModal = function (element) {
    this.$element = $(element);
    this.modalIndex = 0;
};

MultiModal.BASE_ZINDEX = 1040;

/* Max index number. When reached just collate the zIndexes */
MultiModal.MAX_INDEX = 5;

MultiModal.prototype.show = function (target) {
    var that = this;
    var $target = $(target);

    // Bootstrap triggers the show event at the beginning of the show function and before
    // the modal backdrop element has been created. The timeout here allows the modal
    // show function to complete, after which the modal backdrop will have been created
    // and appended to the DOM.

    // we only want one backdrop; hide any extras
    setTimeout(function () {
        /* Count the number of triggered modal dialogs */
        that.modalIndex++;

        if (that.modalIndex >= MultiModal.MAX_INDEX) {
            /* Collate the zIndexes of every open modal dialog according to its order */
            that.collateZIndex();
        }

        /* Modify the zIndex */
        $target.css('z-index', MultiModal.BASE_ZINDEX + (that.modalIndex * 20) + 10);

        /* we only want one backdrop; hide any extras */
        if (that.modalIndex > 1) 
            $('.modal-backdrop').not(':first').addClass('hidden');

        that.adjustBackdrop();
    });

};

MultiModal.prototype.hidden = function (target) {
    this.modalIndex--;
    this.adjustBackdrop();

    if ($('.modal.in').length === 1) {

        /* Reset the index to 1 when only one modal dialog is open */
        this.modalIndex = 1;
        $('.modal.in').css('z-index', MultiModal.BASE_ZINDEX + 10);
        var $modalBackdrop = $('.modal-backdrop:first');
        $modalBackdrop.removeClass('hidden');
        $modalBackdrop.css('z-index', MultiModal.BASE_ZINDEX);

    }
};

MultiModal.prototype.adjustBackdrop = function () {        
    $('.modal-backdrop:first').css('z-index', MultiModal.BASE_ZINDEX + (this.modalIndex * 20));
};

MultiModal.prototype.collateZIndex = function () {

    var index = 1;
    var $modals = $('.modal.in').toArray();


    $modals.sort(function(x, y) 
    {
        return (Number(x.style.zIndex) - Number(y.style.zIndex));
    });     

    for (i = 0; i < $modals.length; i++)
    {
        $($modals[i]).css('z-index', MultiModal.BASE_ZINDEX + (index * 20) + 10);
        index++;
    };

    this.modalIndex = index;
    this.adjustBackdrop();

};

function Plugin(method, target) {
    return this.each(function () {
        var $this = $(this);
        var data = $this.data('multi-modal-plugin');

        if (!data)
            $this.data('multi-modal-plugin', (data = new MultiModal(this)));

        if (method)
            data[method](target);
    });
}

$.fn.multiModal = Plugin;
$.fn.multiModal.Constructor = MultiModal;

$(document).on('show.bs.modal', function (e) {
    $(document).multiModal('show', e.target);
});

$(document).on('hidden.bs.modal', function (e) {
    $(document).multiModal('hidden', e.target);
});}(jQuery, window));
于 2019-01-22T08:38:41.927 回答
0

检查模态数并将值作为 z-index 添加到背景

    var zIndex = 1500 + ($('.modal').length*2) + 1;
    this.popsr.css({'z-index': zIndex});

    this.popsr.on('shown.bs.modal', function () {
        $(this).next('.modal-backdrop').css('z-index', zIndex - 1);
    });

    this.popsr.modal('show');
于 2020-05-06T07:45:45.183 回答
0

此代码非常适合引导程序 4。其他代码中的问题是如何选择模态背景。如果在显示模态后在实际模态上使用 jQuery 下一个选择会更好。

$(document).on('show.bs.modal', '.modal', function () {
        var zIndex = 1040 + (10 * $('.modal').length);
        var model = $(this);
        model.css('z-index', zIndex);
        model.attr('data-z-index', zIndex);
    });

    $(document).on('shown.bs.modal', '.modal', function () {
        var model = $(this);
        var zIndex = model.attr('data-z-index');
        model.next('.modal-backdrop.show').css('z-index', zIndex - 1);
  
  });

于 2020-07-25T08:28:24.857 回答
0

z-indexmodal-backdrop使用 css 进行更正

.modal.fade {
  z-index: 10000000 !important;
  background: rgba(0, 0, 0, 0.5);
}
.modal-backdrop.fade {
  opacity: 0;
}
于 2022-02-08T09:05:20.017 回答
-1

不幸的是,我没有评论的声誉,但应该注意的是,具有 1040 z-index 的硬编码基线的公认解决方案似乎优于试图找到在页面上呈现的最大 zIndex 的 zIndex 计算。

似乎某些扩展/插件依赖于顶级 DOM 内容,这使得 .Max 计算量如此之大,以至于无法进一步增加 zIndex。这会导致一个模态,其中叠加层错误地出现在模态上(如果您使用 Firebug/Google Inspector 工具,您将看到大约 2^n - 1 的 zIndex)

我无法确定不同形式的 Math.Max for z-Index 导致这种情况的具体原因是什么,但它可能会发生,并且对于少数用户来说是独一无二的。(我对 browserstack 的一般测试使这段代码运行良好)。

希望这可以帮助某人。

于 2015-11-29T14:30:15.410 回答
-1

这是一个非常古老的威胁,但对我来说,我只是将我想要的模态的 html 代码放在文件的首位。

于 2021-01-08T18:02:42.533 回答