单页面应用背景遮罩层级问题

Question

有许多层需要一个背景蒙版遮住后面的内容。

但是不可能为每一个弹出层设置一个背景蒙版

现在的解决方案是定位好各个层级的z-index

在需要使用蒙版的时候用js将蒙版的z-index改成弹出层的z-index值减一

各个弹出层也有先后层级关系。但是感觉这个方案不是很妥当

有没有优秀的解决方案

Answer 1

我懂你的意思，而且我猜，是你没有具体实现的思路对吧？

我把我想到的思路拿出来大家讨论下哈：

比如你应该暴露在外面一个变量来保存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

Answer 2

为什么不能给每个层独立的overlay？这样体验更好啊
一个简单的实现：https://github.com/component/overlay
你的弹出层是需要像EXT的dialog一样可以动态调整先后顺序的吗？