您现在的位置是：网站首页> 编程资料编程资料

利用js+css简单实现半透明遮罩弹窗_CSS教程_CSS_网页制作_

2021-09-08 992人已围观

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

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

复制代码
代码如下:



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

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

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

上一篇：background-postion定位与图片结合实现圆角效果 _CSS教程_CSS_网页制作_

下一篇：请不要告诉我你懂css margin _CSS教程_CSS_网页制作_

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网