有许多层需要一个背景蒙版遮住后面的内容。
但是不可能为每一个弹出层设置一个背景蒙版
现在的解决方案是定位好各个层级的z-index
在需要使用蒙版的时候用js将蒙版的z-index改成弹出层的z-index值减一
各个弹出层也有先后层级关系。但是感觉这个方案不是很妥当
有没有优秀的解决方案
我懂你的意思,而且我猜,是你没有具体实现的思路对吧?
我把我想到的思路拿出来大家讨论下哈:
比如你应该暴露在外面一个变量
来保存z-index
值的,比如:window.zIndex
(当然,你可以把window
换成其他的,比如在自建的一个命名空间下挂着)
再暴露出一个变量
用来保存对应modal
顺序的(Array
对象)(这里保存modal
的z-index
值,或者直接modal
对象都可以,看哪个适合你),比如:window.modalList
window.zIndex
一开始给个初始化的值,比如10000
,然后要设计它的算法,比如每次加1000
。
每次显示一个modal
window.zIndex += 1000;
把window.zIndex
赋给该modal
style
里的z-index
;
然后往window.modalList
里追加该值;
然后把window.zIndex - 1
赋给背景蒙板;(当然,减10
也行,你懂)modal
关闭,window.modalList.pop()
删除最后一个元素
再考虑多层modal
:
显示modal
跟上面的逻辑一样;
每次关闭
modal
时,判断window.modalList
有多少元素,length
为几,就表示当前窗口有几个modal
打开着。
为0
时:
关闭背景蒙板
不为0
时:
取window.modalList
最后一个元素(假设保存的是z-index
),减1
之后赋值给背景蒙板
以上。有什么想法可以共同讨论~
希望可以帮到你 :P
为什么不能给每个层独立的overlay?这样体验更好啊
一个简单的实现:https://github.com/component/overlay
你的弹出层是需要像EXT的dialog一样可以动态调整先后顺序的吗?