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

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

用到遮罩弹窗时在网上搜索,看到绝大多数都是基于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元素,避免发生误操作。实现起来简简单单。

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

相关文章:

你感兴趣的文章:

标签云: