如何打开多个模态,将新模态置于活动模态的顶部,如果再次单击以打开旧模态,则还增加了旧的css覆盖。
Am使用下面的jquery代码打开多个引导程序模态,但是问题是,当我打开多个以上的自定义模态后,单击以打开前一个活动模态时,我使用的jquery没有设置正确的{{1} }。
css index overlay
$(document).ready(function() {
$('.modal').on('hidden.bs.modal', function(event) {
$(this).removeClass( 'fv-modal-stack' );
$(this).removeClass(function(i, c) {return c.match(/fv-modal-index-\d+/g).join(" ");});
$('body').data( 'fv_open_modals', $('body').data( 'fv_open_modals' ) - 1 );
});
$('.modal').on('shown.bs.modal', function (event) {
// keep track of the number of open modals
if ( typeof( $('body').data( 'fv_open_modals' ) ) == 'undefined' ) {
$('body').data( 'fv_open_modals', 0 );
}
// if the z-index of this modal has been set, ignore.
if ($(this).hasClass('fv-modal-stack')) {
return;
}
$(this).addClass('fv-modal-stack');
$('body').data('fv_open_modals', $('body').data('fv_open_modals' ) + 1 );
var newIndex_x = 1040 + (10 * $('body').data('fv_open_modals' )),
newIndex_y = 1039 + (10 * $('body').data('fv_open_modals'));
$(this).css('z-index', newIndex_x).attr("data-index", newIndex_x).addClass("fv-modal-index-"+newIndex_x);
$('.modal-backdrop').not('.fv-modal-stack').css('z-index', newIndex_y).addClass("backdrop-index-"+newIndex_y);
$('.modal-backdrop').not('fv-modal-stack').addClass('fv-modal-stack');
});
$(document).on("click", ".openModa", function(){
var element = $(this).attr("data-target");
openModal(element);
});
});
function openModal(element){
if($(element).css('display') == 'block'){
var oldIndex = parseInt($(element).attr("data-index")),
newIndex_x = oldIndex + (10 * $('body').data('fv_open_modals' )),
newIndex_y = (oldIndex-1) + (10 * $('body').data('fv_open_modals'));
$(element).css('z-index', newIndex_x).attr("data-index", newIndex_x)
.removeClass("fv-modal-index-"+oldIndex).addClass("fv-modal-index-"+newIndex_x);
$('.modal-backdrop.backdrop-index-'+ (oldIndex-1)).not('.fv-modal-stack').css('z-index', newIndex_y)
.removeClass('backdrop-index-'+ (oldIndex-1)).addClass("backdrop-index-"+newIndex_y);
}else{
$(element).modal({
backdrop: true,
keyboard: false
});
}
}
如果模式已打开,我确实创建了一个litle函数来增加css索引,但是效果不佳。逐步单击打开模式时,您可以理解我的意思。