bootstrap 一个页面能有多个dialog吗

因为项目需要，在页面交互上要d出多个dialog窗口，而bootstrap的modal支持d出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进行增大即可。

bootstrap 模态框d出时被遮罩层挡住了是设置错误造成的，解决方法为：

1、打开WebStorm开发工具，新建‘test.html’文件，并在文件同级目录安装部署Bootstrap相关文件，目录结构如下图。

2、在‘test.html’中写如下代码。

3、网页查看效果如下图，这时点击按钮还没有相应，因为没有对应的代码。

4、修改‘test.html’代码如下。

5、网页查看效果，点击按钮，可以正常d出模态框，点击网页其他位置模态框消失。

6、在模态框上增加取消按钮，点击取消后模态框消失，代码如下。

每个模态窗会生成一个class为"modal-backdrop"的遮罩。在模态窗第一次显示时为这个模态窗的遮罩层设置一个id。例如：

$modal.modal({show: true,backdrop: 'static'})

$('.modal-backdrop').each(function() {

$(this).attr('id', 'id_' + Math.random())

})

---