zoukankan      html  css  js  c++  java
  • js+css简单实现半透明遮罩弹窗

    用到遮罩弹窗时在网上搜索,看到绝大多数都是基于Jquery的。

    我不想用那么复杂的应用,于是自己写了一个。

    思路:

      两个div,一上一下。上面的包含iframe,用以展示弹窗内容。下面的div实现半透明的遮罩效果。

    代码:

    <div id="div_window2" style="z-index:600;left:0px; visibility:hidden; 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;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元素,避免发生误操作。实现起来简简单单。

  • 相关阅读:
    资源汇总
    最近面试经历
    Screen Space Ambient Occlusion
    实时渲染下的多线程协作:实践
    High Dynamic Range
    Deferred Shading
    实时渲染下的多线程协作
    9.了解四个相等判断的用法
    14.使用构造函数链
    16.垃圾最小化
  • 原文地址:https://www.cnblogs.com/timeismoney/p/2093194.html
Copyright © 2011-2022 走看看