导航:首页 > 编程语言 > js蒙版效果

js蒙版效果

发布时间:2023-12-29 00:54:20

Ⅰ extjs的alert的蒙版效果的原理到底是什么啊有谁能从从js,css层面上解释一下他的实现原理吗 我用fireb

你说的是不是常见的那种 弹出一个半透明遮罩层,同时不能操作页面相关对象,只能操作在遮罩层以上的内容?

实际这个效果很简单,半透明遮罩层(是不是半透明无所谓)是实现了和文档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设置为绝对定位,这样布局比较方便

Ⅱ css如何给图片加一个蒙版遮罩

1.首先,看一下HTML,一个img图像控件和一个带有样式的div,其中包含文本。这个就是蒙版遮罩层。

阅读全文

与js蒙版效果相关的资料

热点内容
海克斯康三次元如何编程循环测量 浏览:518
app无法下载是为什么苹果手机 浏览:518
右击此电脑管理找不到此文件 浏览:264
图像文件格式百科 浏览:523
没有网络怎么定位 浏览:972
剪切到优盘文件找不到了 浏览:764
电脑管家的文件名 浏览:910
如何将扫描文件转换为电子版 浏览:4
u盘的h246文件怎么播放 浏览:203
如何用阿里云服务器学习数据库 浏览:84
华为文件管理找不到下载文件 浏览:409
word模板dot的使用 浏览:466
春节车找人app哪个好 浏览:618
文件管理电脑找不到了怎么办 浏览:516
如何改变app图标图片 浏览:767
什么是大数据结构的最低层 浏览:575
pdf文件给对方后期改密码收回 浏览:295
word2010怎么画箭头 浏览:184
win10的自动备份文件在哪个目录 浏览:843
文件夹打包成jar 浏览:456

友情链接