通过将新模式放置在活动模式之上来打开多个模式

时间:2019-03-04 19:19:25

标签: javascript jquery twitter-bootstrap bootstrap-modal

如何打开多个模态,将新模态置于活动模态的顶部,如果再次单击以打开旧模态,则还增加了旧的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索引,但是效果不佳。逐步单击打开模式时,您可以理解我的意思。

0 个答案:

没有答案