利用js+css简单实现半透明遮罩弹窗

ttx9n · 发表于 2011-7-27 11:38:31

用到遮罩弹窗时在网上搜索，看到绝大多数都是基于Jquery的。我不想用那么复杂的应用，于是自己写了一个。思路：
　　两个div，一上一下。上面的包含iframe，用以展示弹窗内容。下面的div实现半透明的遮罩效果。
代码：

复制代码代码如下:
<div id="div_window2" style="z-index:600;left:0px; visibility:hidden; width:100%; position:absolute; height:100%;">　　<table width="99%" height="99%" border="0" cellpadding="0" cellspacing="0" align="center">　　　　<tr>　　　　　　<td width="100%" height="100%" align="center">　　　　　　　　<iframe id="iframe_window" width="445" height="252" noresize scrolling="no" frameborder="0" marginheight="0" marginwidth="0" topmargin="0" leftmargin="0" align="center"></iframe>　　　　　　</td>　　　　</tr>　　</table></div><div id="div_window" style="z-index:200;left:0px;visibility:hidden;width:100%;position:absolute;height:100%;background-color: #ffffff;opacity:0.8; filter:alpha(opacity=80)"></div>

其中下面的div设置css。为了兼容ie和火狐半透明要写两句：opacity:0.8; filter:alpha(opacity=80)

展示弹窗时把两个div都显示出，并赋予iframe地址。关闭时关闭两个div。

最终效果下面的div遮盖了弹窗以外的html元素，避免发生误操作。实现起来简简单单。

i1efp6c · 发表于 2022-12-2 08:55:39

哈哈哈哈哈哈哈

j__j33p · 发表于 2023-8-12 15:59:38

额头额定法国队是范德萨

x20yd3qx · 发表于 2023-11-2 22:53:59

的谁vdvdsvdsvdsdsv

95nd4ba · 发表于 2023-12-11 01:43:37

强烈支持楼主ing……

hd1tvqb3 · 发表于 2024-1-25 00:56:02

还有人在不。。。。。。。。。。啊

9jduu05 · 发表于 2024-2-29 05:22:09

dfdsafdsfdsfdsf

q42obh · 发表于 2024-3-11 00:55:10

逛逛看看瞧瞧

pwseqn1h · 发表于 2024-5-7 15:24:18

啦啦啦啦啦啦哈哈哈

a971560 · 发表于 2024-7-1 15:08:01

谢谢下载来看看

账号		自动登录	找回密码
密码			立即注册

[CSS] 利用js+css简单实现半透明遮罩弹窗

相关帖子