弹出层与蒙版在浏览器中兼容性问题

来源：互联网发布：中国电子口岸数据深圳编辑：程序博客网时间：2024/05/16 07:09

今天折腾了半天。终于搞定在IE，FF，Chromium 中显示浮动层。且背景有阴影的效果。

其中的效果如下图所示

IE中显示效果。

FF中显示效果。

CSS样式：

#mask /*背景蒙版层样式*/ { position: absolute; top: 0; left: 0; background: #666; opacity: 0.50; /**关键，可以兼容浏览器了**/ -moz-opacity:0.5; /* 兼容 FF*/ z-index: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; /*IE8*/ filter: alpha(opacity=50); /*IE5、IE5.5、IE6、IE7*/ } #ShowWinTip /*显示内容层样式*/ { z-index: 5; position: absolute; width: 700px; height: 490px; }

JS代码：

function showTipWin() { document.getElementById("mask").style.visibility = 'visible'; document.getElementById("mask").style.display = "block"; document.getElementById("ShowWinTip").style.display = 'block'; //蒙版宽高设置 var FadeHeight = (document.body.scrollHeight > document.body.clientHeight) ? document.body.scrollHeight : document.body.clientHeight; var FadeWidth = (document.body.scrollWidth > document.body.clientWidth) ? document.body.scrollWidth : document.body.clientWidth; document.getElementById("mask").style.width = FadeWidth+"px"; //不加px FF中不会显示 document.getElementById("mask").style.height = FadeHeight+"px"; alert //层的位置 //设置层的位置 document.getElementById("ShowWinTip").style.left = (document.body.clientWidth - 700) / 2 + document.body.scrollLeft+"px"; document.getElementById("ShowWinTip").style.top = '10px'; }

Html代码：

<%--此句是阴影不要删除--%> <div id="mask"> </div><%--弹出层--%> <div id="ShowWinTip" style="display: none; border: 2px solid #afd0f3; overflow: auto;" mce_style="display: none; border: 2px solid #afd0f3; overflow: auto;">  <div style="background-image: url(images/form_toolbar_back.gif); height: 44px;"> <div style="float: left;" mce_style="float: left;"> </div> <div style="float: right; padding-top: 8px;" mce_style="float: right; padding-top: 8px;"> 关闭 </div> </div>   <div style="background-color: #d8e8ff; height: 56px;"> <div style="float: left; width: 66px; height: 48px;"> <img src="images/ico_lrg_4207.gif" mce_src="images/ico_lrg_4207.gif" /></div> <div style=""> <span style="font-weight: bold; margin-bottom: 5px;" mce_style="font-weight: bold; margin-bottom: 5px;">标题</span><br /> <span style="font-size: 18px; color: #6699cc; font-weight: bold;" mce_style="font-size: 18px; color: #6699cc; font-weight: bold;"> <img src="images/ico_16_3.gif" mce_src="images/ico_16_3.gif" />仿真系统详细内容展示</span> </div> </div>   <div style="background-image: url(images/form_back.gif); height: 500px;"> <div style="float: left;" mce_style="float: left;"> </div>  <div> </div>  </div>   <div style="background-image: url(images/statusbar_back.gif); padding-top: 5px; height: 12 !important; height: 17px; padding-left: 10px;"> <b>状态</b> <span>启用</span> </div>  </div>