jQuary使用多层dialog时的遮罩(lock:true)

当页面打开一个dialog时，如果lock属性为true，jQuery会给页面添加遮罩。

这篇文章讨论的是，dialog如何玩转这个遮罩。

 

基础知识说明

1，CSS的z-index属性

z-index属性表示了页面元素的堆叠顺序，属性值越高，越会显示的靠前。也就是说，属性值小的元素会被属性值高的元素盖住。

z-index可以是负值。

 

2，jQuery创建dialog时的lock属性

当lock属性为true时，页面会添加一个遮罩层，遮住父页面而不遮住新的dialog。也就是说，遮罩层的z-index属性大于父页面而小于dialog。

 

3，jQuery遮罩的html代码

当jQuery生成遮罩时，遮罩的代码大概是这样的：

<div id="ldg_lockmask" style="position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; overflow: hidden; z-index: 1979;"></div>

jQuery通过维护遮罩的z-index属性来完成遮罩和取消遮罩的功能。

如果添加遮罩时发现页面已经有了遮罩，则不会再添加一层遮罩，但有可能修改遮罩的z-index值。

 

jQuery维护遮罩z-index属性的逻辑

网上没找到关于jQuery如何维护遮罩的z-index属性，但可以通过实践发现一部分逻辑：

1，一般情况下页面默认的z-index是0。

2，新增dialog时，如果此时没有遮罩，那么加一层遮罩，新增dialog的z-index比遮罩大1。

      比如从页面X新增dialogA，如果dialogA的z-index是1980，那么遮罩的z-index是1979。

3，新增dialog时，如果此时已经有了遮罩，那么修改遮罩的z-index，比原页面大1，并且新增dialog的z-index比遮罩大1。

      比如从dialogA (假设他的z-index=1980)新增dialogB，那么遮罩的z-index从1979变为1981（比dialogA大1），新增的dialogB的z-index是1982（比遮罩大1），dialogA还是1980。

4，当点击dialog的标题栏或button栏时，dialog的z-index会加1。页面监听的是按下鼠标（mousedown）的事件。

5，关闭一个dialog后，遮罩的z-index变为比原页面小1，原页面z-index不变。

      比如关闭dialogB时，遮罩的z-index变为1979（比dialogA小1），dialogA还是1980。

6，关闭一个dialog后，点击原页面的body部分，原页面的z-index会变为比刚刚关闭的dialog大1，遮罩的z-index不变。

      注： 如果是用鼠标关闭dialog页面，比如点击右上角的叉号或者点击关闭按钮，由于dialog监听了mousedown事件，在关闭dialog的时候他的z-index就已经加了1，在点击原页面后会在此基础上再加1，造成了加2的效果。

 

z-index的变化过程

使用两层dialog时，每一步各层的z-index值，可以用下面的表格来表示：

	页面X	遮罩	dialogA	dialogB	页面效果
初始	0	无	无	无	正常页面
打开dialogA	0	1977	1978	无	dialogA可以正常点击，遮罩遮住页面X
在dialogA的标题栏点几下	0	1977	1985	无	dialogA可以正常点击，遮罩遮住页面X
打开dialogB	0	1986	1985	1987	dialogB可以正常点击，遮罩遮住dialogA和页面X
在dialogB的标题栏点几下	0	1986	1985	1990	dialogB可以正常点击，遮罩遮住dialogA和页面X
关闭dialogB	0	1984	1985	无	dialogA可以正常点击，遮罩遮住页面X
点击dialogA的body	0	1984	1992	无	由于dialogB在点击关闭时先变成了1991再关闭，所以dialogA变成1992

 

吐槽

1，为什么点击dialog的标题栏就会让z-index加1呢？

2，为什么dialogB关闭之后再点一下dialogA的body就会让dialogA的z-index变的比dialogB高呢？

 

jQuery对dialog的装配可以在jQuery的源码中看到，可惜没怎么看懂，否则应该可以正面解决这些问题。

 

以上