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

2022-01-13,,,,

用到遮罩弹窗时在网上搜索,看到绝大多数都是基于Jquery的。我不想用那么复杂的应用,于是自己写了一个。

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

复制代码代码如下:
  

    

      

    

  

              

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

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

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

以上就是利用js+css简单实现半透明遮罩弹窗的详细内容,更多请关注本站其它相关文章!

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

下载本文的Word格式文档,以方便收藏与打印。