我试图找到一个简单的函数,可以将模态相互重叠,这样一个模态就可以触发第二个模态。这意味着使用z索引的模态必须是一个在另一个之上,因此我们需要对背景(半透明覆盖)进行相同的处理。
我发现了一些插件,一些使用纯css的答案等。这是我的,如果它能帮助你,你不需要添加任何东西,除了这几行!
发布于 2016-04-04 22:03:23
$('.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设计问题!
https://stackoverflow.com/questions/36404873
复制相似问题