extjs的alert的蒙版效果的原理到底是什么啊？有谁能从从js，css层面上解释一下他的实现原理吗？ 我用fireb
发布网友
发布时间：2023-01-02 18:49
共1个回答
热心网友
时间：2023-10-09 21:30
实际这个效果很简单,半透明遮罩层(是不是半透明无所谓)是实现了和文档document同宽同高,但是css的z-index属性要大于普通内容的一个空白div,这个div做了半透明效果,隔离了所有事件,你鼠标在网页上面的点击,移动,拽托等操作只作用于这个div,因此原网页的所有事件均失效.
在遮罩层上一般还会有一个可操作域(div2),这个同理,这个div2的z-index要大于遮罩层的z-index,从而他会在遮罩层以上,而能实现其操作.
以上是原理,那么实现起来要分一些几个步骤:
1,遮罩层(可以事先就进行半透明处理和document等宽等高处理,这个需要通过js编写)和可操作域(div2) 的display属性设置为none.处于隐藏状态.
2,当网页需要激活遮罩事件的时候,js将遮罩层和可操作域的display设置为block.处于显示状态,当在可操作域关闭事件触发的时候,同时将遮罩和可操作域隐藏.
需要注意的是,遮罩层最好是在body的根目录下,并position设置为绝对定位,这样布局比较方便追问我自己刚刚弄清楚了！
1.发现用来遮盖的z-index有设置，被遮盖的div层z-index没有设置,那是不是默认为0？
2.想问一下，是不是直接加上div层就会有半透明效果？我好想没有看到什么背景图片什么的？
不过有看到下面这段灰色代码，这个灰色代码是干嘛的，好像我删除了对界面都没影响？
3. 你觉得在extjs环境下有没有好办法可以获取某个元素是否被遮盖了的?
追答1,默认为0
2,这个不会的,最好你用jquery类库之类的,自己写的话,需要写css filter滤镜,网上有很多这样的代码,如果你想用png半透明图片也可以,但是ie6不支持png半透明
用firebug查看,凡是display为none的代码会是灰色的.你这个标签里已经标注了display:none
3,extjs自成体系,这个貌似比较难,不太清楚
