js+css简单实现半透明遮罩弹窗
2011-06-29 12:36
267 查看
用到遮罩弹窗时在网上搜索,看到绝大多数都是基于Jquery的。
我不想用那么复杂的应用,于是自己写了一个。
思路:
两个div,一上一下。上面的包含iframe,用以展示弹窗内容。下面的div实现半透明的遮罩效果。
代码:
其中下面的div设置css。为了兼容ie和火狐半透明要写两句:opacity:0.8; filter:alpha(opacity=80)
展示弹窗时把两个div都显示出,并赋予iframe地址。关闭时关闭两个div。
最终效果下面的div遮盖了弹窗以外的html元素,避免发生误操作。实现起来简简单单。
我不想用那么复杂的应用,于是自己写了一个。
思路:
两个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简单实现半透明遮罩弹窗
- JS+CSS实现简单滑动门(滑动菜单)效果
- CSS+JS实现简单的时钟
- 初识网站前端--用简单的HTML+CSS+js实现的选项卡切换效果
- js+html+css实现简单页面交互功能(2015知乎前端笔试题)http://v.youku.com/v_show/id_XMTI0ODQ5NTAyOA==.html?from=y1.7-1.2
- tomcat服务器下使用nginx实现最简单的动静分离--解决css、js不加载的问题
- JS+CSS实现的简单折叠展开多级菜单效果
- JS+CSS简单实现DIV遮罩层显示隐藏
- JS+CSS简单实现DIV遮罩层显示隐藏
- 简单的js+css的输入框自动提示功能实现
- 用html+css+js实现的一个简单的图片切换特效
- js+css实现的简单易用兼容好的分页
- JS+CSS简单实现DIV遮罩层显示隐藏
- JS+CSS简单树形菜单实现方法
- tomcat服务器下使用nginx实现最简单的动静分离--解决css、js不加载的问题
- js+css简单实现网页换肤效果
- JS+CSS简单实现DIV遮罩层显示隐藏
- js+css实现简单下拉菜单
- PHP根据传入参数合并多个JS和CSS文件的简单实现