简单的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模态框问题的主要内容,如果未能解决你的问题,请参考以下文章
懂bootstrap的过来看看,bootstrap模态框的问题