多模态叠加

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

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

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

当前回答

看看这个!这个解决方案解决了我的问题，几个简单的CSS行:

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

这是我找到它的地方的链接:Bootply 只要确保需要出现在顶部的.modual在HTML代码中处于第二，这样CSS就可以发现它是“偶数”。

2017-09-10 17:14:07

其他回答

根据耶莫·拉默斯的建议，这似乎是一个更短的版本。即使是基本的动画，如淡入/淡出，甚至疯狂的蝙蝠侠报纸旋转。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-15 16:19:51

更新日期:2019年1月22日，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-22 08:38:41

这段代码非常适合用于引导4。其他代码中的问题是如何选择模态背景。这将是更好的，如果你使用jQuery的下一个选择在实际的模态已经显示。

(文档)。(“show.bs美元。模态”、“。Modal '， function () { var zIndex = 1040 + (10 * $('.modal').length); Var模型= $(this); model.css (z - index, zIndex); 模型。attr (data-z-index, zIndex); })； (文档)。(“shown.bs美元。模态”、“。Modal '， function () { Var模型= $(this); var zIndex = model.attr('data-z-index'); model.next('.modal- background .show').css('z-index'， zIndex - 1); })；

2020-07-25 08:28:24

解决方案灵感来自@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引导程序测试的

2014-07-23 15:31:55

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

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

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

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

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">×</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-03 13:50:58

推荐文章

最新文章

标签