简单的bootstrap模态框问题

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了简单的bootstrap模态框问题相关的知识,希望对你有一定的参考价值。

初学bootstrap,今天用模态框按照例子写了下。那么问题就来了。我的页面点击按钮后,页面灰化了,可问题是模态窗口没有出来,求大神帮忙。如图所示。。

参考技术A

你有一行代码

<div id="example" class="modal fade hide in" style="display:none;">

你需要把你自定义的 style 去掉,还有class  里面的 hide 去掉,因为这两个都是 隐藏不显示模态框的定义

Bootstrap:模态而不是模态[重复]

【中文标题】Bootstrap:模态而不是模态[重复]【英文标题】:Bootstrap: modal over modal [duplicate] 【发布时间】:2016-07-24 03:01:00 【问题描述】:

我试图找到一个简单的函数,可以将模态相互叠加,以便一个模态可以触发第二个模态。 这意味着模态框必须使用 z-index 在另一个之上,因此我们需要对背景(半透明覆盖)做同样的事情。

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

【问题讨论】:

【参考方案1】:
$('.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 属性)。由于背景会在几秒钟后出现,因此我们等待 100 毫秒,然后再计算背景堆栈函数中的背景。 最后但同样重要的是,modalStack 函数将现有的 z-index 值与 nModals 数相乘,这意味着我们可以打开多达 20 个模态,并且这个解决方案仍然有效。

限制是 CSS3 和浏览器接受的最大 z-index。如果你达到了这一点......你可能有一个用户体验设计问题!

【讨论】:

以上是关于简单的bootstrap模态框问题的主要内容,如果未能解决你的问题,请参考以下文章

JavaScript:bootstrap 模态框的简单应用

懂bootstrap的过来看看,bootstrap模态框的问题

在一个页面触发不同的bootstrap模态框

bootstrap模态框背景灰色,按钮全部无法点击,求解决办法

bootstrap模态框没法弹出

bootstrap模态框内的表格javascript input radio单选取值问题