因為項目需要，在頁面交互上要彈出多個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();
}