相思资源网 Design By www.200059.com
思路:
两个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元素,避免发生误操作。实现起来简简单单。
两个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元素,避免发生误操作。实现起来简简单单。
标签:
半透明,遮罩弹窗
相思资源网 Design By www.200059.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
相思资源网 Design By www.200059.com
暂无利用js+css简单实现半透明遮罩弹窗的评论...