摘要：
由于项目的需要，页面交互中将弹出多个对话框窗口，引导模式支持弹出对话框窗口。然而，在此基础上，将弹出越来越多的第一个遮罩层，并且背景越来越暗。代码如下：（）；openDialog函数传入id，该id是要生成的对话框的div的id。url是对话框中iframe的src。id也将写入模态函数的参数选项中。这个。$此$Backdrop=$（“”）。appendTo添加遮罩层。在模态类代码中添加一个类对象，模态。ids=[]；添加遮罩层时，即vardoAnimate=$。支持transition&&animate，按下id，然后判断对话框的数量dialogId=option.id；Modal.ids.push；如果｛this.$background=$（''）.appendTo；$.attr（“style”，“z-Index:100000！
因为项目需要，在页面交互上要弹出多个dialog窗口，而bootstrap的modal支持弹出dialog窗口，但是在此基础上，会出先遮罩层越来越多，背景越来越黑的情况代码具体如下：
(function(){ modal = {}; modal.openDialog = function(url, title, width, height, id){}; modal.closeDialog = function(id){}; window.modal = modal; })();
openDialog函数中传入了id，即为即将生成的dialog的div的id，url为dialog中iframe的src，id也将写在modal函数的参数option中。
调用多个dialog时，需要传入不同的id；
源代码中
backdrop: function (callback) {
var that = this
, animate = this.$element.hasClass('fade') ? 'fade' : ''
if (this.isShown && this.options.backdrop) {
var doAnimate = $.support.transition && animate
this.$backdrop = $('')
.appendTo(document.body)
this.$backdrop.click(
this.options.backdrop == 'static' ?
$.proxy(this.$element[0].focus, this.$element[0])
: $.proxy(this.hide, this)
)
if (doAnimate) this.$backdrop[0].offsetWidth // force reflow
this.$backdrop.addClass('in')
if (!callback) return
doAnimate ?
this.$backdrop.one($.support.transition.end, callback) :
callback()
} else if (!this.isShown && this.$backdrop) {
this.$backdrop.removeClass('in')
$.support.transition && this.$element.hasClass('fade')?
this.$backdrop.one($.support.transition.end, callback) :
callback()
} else if (callback) {
callback()
}
}函数中 this.$backdrop = $('').appendTo(document.body)即为添加遮罩层。
遮罩层实现为在body后添加，并设置该div的z-Index为99999；
我们接下来的实现也是用z-Index，考虑到一层一层网上叠加z-Index，遮罩层只一个即可，而不同的dialog只需比遮罩层的z-Index高即可。
那就仅第一个dialog打开的时候添加遮罩层，其余时候对遮罩层的style中z-Index进行增大即可。
在Modal类代码中添加类对象，Modal.ids = [];
在进行添加遮罩层时，即var doAnimate = $.support.transition && animate 这行代码后对id进行push，再进行判断dialog个数
dialogId = option.id;
Modal.ids.push(id);
if(Modal.ids.length==1){
this.$backdrop = $('').appendTo(document.body);
$("#"+id).attr("style","z-Index:100000!important");
}else{
var perviouszIndex = $(".modal-backdrop").css("z-Index");
this.$backdrop = $(".modal-backdrop").attr("style","z-Index:"+(perviouszIndex+2)+"!important");
$("#"+id).attr("style","z-Index:"+(perviouszIndex+3)+"!important");
}而当关闭时，需要对遮罩层的z-Index重新计算，dialog被隐藏了就不需要了，因为再次打开时会再次计算几次
关闭时，对遮罩层的操作在
removeBackdrop: function () {
this.$backdrop && this.$backdrop.remove()
this.$backdrop = null
}函数中，改写该函数即可
removeBackdrop: function () {
if(Modal.ids==1)
this.$backdrop && this.$backdrop.remove();
this.$backdrop = null;
Modal.ids.shift();
}else{
this.$backdrop.attr("style","z-Index:"+(perviouszIndex-2)+"!important")；
Modal.ids.shift();
}以上