兼容IE6的遮罩层
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
蕃薯耀 2014年7月10日 18:06:35 星期四
兼容IE6的遮罩层,利用“* Html”这个Hack,设置IE6使用position:absolute;和 expression 来模拟fixed的效果,另外设置background:url(*)防止抖动。
遮罩层Css代码:
.overlay{ position: fixed; z-index: 100000; /*按需设置*/ width: 100%; height: 100%; top: 0; left: 0; filter: alpha(opacity=50); opacity: 0.5; overflow: hidden; background-color: #000; } * html { background:url(*) fixed; } * html body { margin:0; height:100%; } * html .overlay{ position: absolute; left: expression(documentElement.scrollLeft + documentElement.clientWidth - this.offsetWidth); top: expression(documentElement.scrollTop + documentElement.clientHeight - this.offsetHeight); }
屏幕居中代码:
.cen{ position:absolute; top:50%; left:50%; width:200px; height:100px; margin-top:-50px; margin-left:-100px; border:1px solid red; line-height:30px; font-size:16px; text-align:center; color: red; }
完整示例代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>DIV CSS遮罩层 兼容IE6</title> <script language="javascript" type="text/javascript"> function showdiv() { document.getElementById("show").style.display ="block"; } function hidediv() { document.getElementById("show").style.display ='none'; } </script> <style type="text/css"> .overlay{ position: fixed; z-index: 100000; /*按需设置*/ width: 100%; height: 100%; top: 0; left: 0; filter: alpha(opacity=50); opacity: 0.5; overflow: hidden; background-color: #000; } * html { background:url(*) fixed; } * html body { margin:0; height:100%; } * html .overlay{ position: absolute; left: expression(documentElement.scrollLeft + documentElement.clientWidth - this.offsetWidth); top: expression(documentElement.scrollTop + documentElement.clientHeight - this.offsetHeight); } .cen{ position:absolute; top:50%; left:50%; width:200px; height:100px; margin-top:-50px; margin-left:-100px; border:1px solid red; line-height:30px; font-size:16px; text-align:center; color: red; } </style> </head> <body> <input id="btnshow" type="button" value="Show" onclick="showdiv();"/> <div id="show" class="overlay"> <div class="cen"> 是否垂直居中? <input id="btnclose" type="button" value="Close" onclick="hidediv();"/> </div> </div> </body> </html>
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
蕃薯耀 2014年7月10日 18:06:35 星期四
相关推荐
实现弹出网页遮罩层,可兼容IE6/IE7/IE+++等; 缩放浏览器时,内容狂始终居中; 有点小bug,在IE6下,遮罩层颜色没透明,屎黑色,等我有空完善下。
JS遮罩层,可拖动(兼容IE、FF与谷歌)
这是多么能让千万只草原上的马儿奔腾的要求~~~ 先实现一个比较简单的功能: 需求:网页遮罩层/弹出层,兼容IE6 幸好本屌丝以前聪明收集了个js的版本,so,自己改写成了jQuery插件形式的,方便以后使用。 屁话不多放...
自己原创的一款简单的jQuery弹出遮罩层小插件,弹出的层可移动、也可以关闭,时间关系没有进行美化,经过测试在IE6、7、8下都没有问题,其它浏览器没有测试。
( 页面加载中(遮罩层、模拟查询、模拟隐藏、模拟刷新、全屏遮罩、兼容ie、谷歌、火狐等浏览器)
css div 遮罩层想必熟悉网页的朋友都不陌生吧,网上也有相关的实现文章,不过大都对浏览器的兼容性不好,在本文将为大家介绍的是一个可以兼容IE6-IE9 FireFox 的遮罩层,感兴趣的朋友不要错过
知识点6:可编辑遮罩层 在实现遮罩层时,可以使用javascript来实现可编辑遮罩层的功能。例如,可以使用`contenteditable`属性来设置遮罩层的可编辑性,然后使用javascript来处理用户的编辑操作。 知识点7:兼容性...
页面加载中(遮罩层支持ajax、模拟查询、模拟保存、模拟导入、模拟隐藏、模拟刷新、全屏遮罩、兼容ie、谷歌、火狐等浏览器)2016.09.13.zip
本文实例讲述了jQuery实现可兼容IE6的遮罩功能。分享给大家供大家参考,具体如下: 最精简,最强大的 jQuery 遮罩层效果。 当浏览器改变大小时,遮罩层的大小会相应地改变。 遮罩层上方的对话框可随 scroll 的改变而...
1.兼容IE5.5+,插件css样式整合到了插件代码中,取消了1.0版的样式表 新增拖拽功能(默认可拖拽)。可设置拖拽的触点元素,默认是border(弹窗的半透明的的边栏) 2.可在参数自定义弹窗border边框颜色和透明度 3.可设置...
看了拉钩首页的效果不错,模仿写了一个,鼠标从不同方向进入div时,遮罩层同方向移入和划出
代码如下:<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” ... <head> <... charset=utf-8″ /> <...史上最精简,最强大的JS遮罩层效果,支持ie firefox jQuery遮罩层</tit
一个简单易用的遮罩效果,里面有范例。兼容IE\FF\google等主流浏览器
有js+css和jquery+css实现的弹出居中的遮罩层,兼容IE6 7 8 和ff
点击按钮弹出一个层,其余部分遮罩,右上角有关闭功能,兼容各大浏览器
6.是否显示遮罩层 7.遮罩层颜色设置 8.遮罩层透明度设置 9.窗口层叠顺序设置,以实现多级弹出 10.是否显示窗体阴影 11.定时关闭功能 12.自定义窗口大小 13.自定义窗口内容,支持HTML格式和jquery对象格式,不支持...