当页面打开一个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的源码中看到,可惜没怎么看懂,否则应该可以正面解决这些问题。
以上