modal过多, 导致背景色太深问题

最新推荐文章于 2024-10-11 18:30:39 发布

转载最新推荐文章于 2024-10-11 18:30:39 发布 · 1.6k 阅读

jQuery-UI组件专栏收录该内容

10 篇文章

订阅专栏

本文介绍了一种使用jQuery实现的模态框层级管理方法，确保多个模态框打开时能够正确处理层级关系，并通过调整z-index值来实现正确的显示顺序。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

初始化时, 直接执行即可

$(document).on('show.bs.modal', '.modal', function(event) {
    $(this).appendTo($('body'));
}).on('shown.bs.modal', '.modal.in', function(event) {
    setModalsAndBackdropsOrder();
}).on('hidden.bs.modal', '.modal', function(event) {
    setModalsAndBackdropsOrder();
});


function setModalsAndBackdropsOrder() {  
    var modalZIndex = 1040;
    $('.modal.in').each(function(index) {
        var $modal = $(this);
        modalZIndex++;
        $modal.css('zIndex', modalZIndex);
        $modal.next('.modal-backdrop.in').addClass('hidden').css('zIndex', modalZIndex - 1);
    });
    $('.modal.in:visible:last').focus().next('.modal-backdrop.in').removeClass('hidden');
}