多模态叠加

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

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

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

当前回答

我意识到一个答案已经被接受，但我强烈建议不要破解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'); 

    });        
});

2014-02-16 21:18:32

其他回答

基于这个答案的例子，我更新了它，以支持引导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

检查情态动词的计数，并将值添加到背景作为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-06 07:45:45

每次你运行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-21 09:35:38

这段代码非常适合用于引导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

当解决堆叠模态滚动主页时，当一个关闭时，我发现Bootstrap的新版本(至少自3.0.3版本以来)不需要任何额外的代码来堆叠模态。

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

你可以使用下面的Javascript代码来重新添加modal-open:

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

在不需要背景效果的情况下，你可以设置data- background ="false"。

3.1.1版本。固定固定模式背景覆盖模式的滚动条，但上述解决方案似乎也适用于早期版本。

2014-12-09 14:59:17

推荐文章

最新文章

标签