首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >Bootstrap:模式重于模式

Bootstrap:模式重于模式
EN

Stack Overflow用户
提问于 2016-04-04 22:03:23
回答 1查看 1K关注 0票数 1

我试图找到一个简单的函数,可以将模态相互重叠,这样一个模态就可以触发第二个模态。这意味着使用z索引的模态必须是一个在另一个之上,因此我们需要对背景(半透明覆盖)进行相同的处理。

我发现了一些插件,一些使用纯css的答案等。这是我的,如果它能帮助你,你不需要添加任何东西,除了这几行!

EN

回答 1

Stack Overflow用户

发布于 2016-04-04 22:03:23

代码语言:javascript
复制
$('.modal').on('show.bs.modal', function() {
        var nModals = $('.modal.in').length;
        $(this).attr('data-nmodals', nModals+1);
        backdropStack(nModals);
    });
    function backdropStack(nModals) {
        setTimeout(function() {
            $('.modal-backdrop').each(function() {
                if(!$(this).attr('data-nmodals')) {
                    $(this).attr('data-nmodals', nModals+1);
                }
            });
            modalStack();
        }, 100);
    };
    function modalStack() {
        $('.modal').each(function() {
            $n = $(this).data('nmodals');
            $z = $(this).css('z-index');
            $(this).css('z-index', $n*$z);
        });
        $('.modal-backdrop').each(function() {
            $n = $(this).data('nmodals');
            $z = $(this).css('z-index');
            $(this).css('z-index', $n*$z);
        });
    }

说明:每次打开一个模式时,我们都会对现有的模式进行计数,并给它们编号以识别它们(data-nmodals属性)。由于背景在几秒钟后出现,因此在计数backdropStack函数中的背景之前,我们等待100毫秒。最后但并非最不重要的是,modalStack函数将现有的z索引值与nModals数相乘,这意味着我们可以打开多达20个模态,这个解决方案仍然有效。

该限制是CSS3和浏览器可接受的最大z索引。如果你到了那个地步...您可能遇到了UX设计问题!

票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/36404873

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档