运用js+css简易完成半全透明遮罩弹窗

日期:2021-01-20 类型:科技新闻 

关键词:如何创建网站,免费网站建站,网站建设文章,网站建设7个基本流程,自动建站

思路:
  两个div,1上1下。上面的包括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元素,防止产生误实际操作。完成起来简简易单。

上一篇:纯css的accordion实际效果(编码共享) 返回下一篇:没有了