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

前端  /  管理员 发布于 7年前   301

思路：

两个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元素，避免发生误操作。

实现起来简简单单。