开发者社区> 问答> 正文

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

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

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

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

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

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

有没有优秀的解决方案

展开
收起
杨冬芳 2016-06-06 11:35:50 2167 0
1 条回答
写回答
取消 提交回答
  • IT从业

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

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

    比如你应该暴露在外面一个变量来保存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之后赋值给背景蒙板

    以上。有什么想法可以共同讨论~

    希望可以帮到你

    2019-07-17 19:28:03
    赞同 展开评论 打赏
问答分类:
问答地址:
问答排行榜
最热
最新

相关电子书

更多
渐进式动画解决方案 立即下载
渐进式动画解决方案 立即下载
3D动画的菜谱式灯光与云渲染 立即下载