时间:2021-05-08
思路:
两个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元素,避免发生误操作。实现起来简简单单。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
本文实例讲述了js+CSS实现弹出居中背景半透明div层的方法。分享给大家供大家参考。具体实现方法如下:复制代码代码如下:js+CSS弹出居中的背景半透明div
半透明遮罩层效果基本上都是使用插件实现的,下面为大家分享下使用原生js实现半透明遮罩效果,感兴趣的朋友可以参考下哈,希望对你熟悉原生js有所帮助现在注册关闭用户
点击按钮,出现半透明遮罩层弹框,说说自己之前发过的愁吧1、遮罩层半透明了弹框也跟着半透明了就像这样绝望吧是哪里错了呢?你的css是这样写的吧:应该这样:需要注意
js+css实现遮罩居中弹出层(随浏览器窗口滚动条滚动)复制代码代码如下:*{}{margin:0;padding:0;}html{}{_background:
微信小程序利用css实现遮罩效果实例详解实现效果图:如图所示,使用css实现小程序的遮罩效果,代码如下js文件代码://index.js//获取应用实例vara