兼容IE6的遮罩层

最新推荐文章于 2016-06-06 15:40:30 发布
最新推荐文章于 2016-06-06 15:40:30 发布
阅读量197 收藏
点赞数
分类专栏： html 蕃薯耀分享 js css 工具 文章标签： 兼容IE6的遮罩层 遮罩层 蕃薯耀 蕃薯 css遮罩层
蕃薯耀分享 同时被 3 个专栏收录
409 篇文章 1 订阅
订阅专栏
js
92 篇文章 0 订阅
订阅专栏
工具
51 篇文章 0 订阅
订阅专栏

 

兼容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" οnclick="showdiv();"/>
<div id="show" class="overlay">
	<div class="cen">
		是否垂直居中？
		<input id="btnclose" type="button" value="Close" οnclick="hidediv();"/>
	</div>
</div>
</body>
</html>

 

 

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

蕃薯耀 2014年7月10日 18:06:35 星期四

蕃薯耀
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css div实现的遮罩层完美兼容IE6-IE9 FireFox
09-25
本篇文章将详细介绍如何使用CSS和div元素来创建一个兼容IE6到IE9以及Firefox的遮罩层。 首先，我们需要在HTML中定义两个div元素。一个是`#black_overlay`，它作为遮罩层，覆盖整个页面，通常具有半透明黑色背景；另...
jquery实现遮罩功能（兼容IE6）
Robin022的专栏
08-31 753
最精简，最强大的 jQuery 遮罩层效果。 当浏览器改变大小时，遮罩层的大小会相应地改变。 遮罩层上方的对话框可随 scroll 的改变而改变，即对话框在浏览器居中显示。 HTML 代码 点击这里看 jQuery 遮罩层效果. 关闭 正在加载，请稍后... CSS 代码 body { font-family: Arial, Helvetica, sans-ser
IE6下遮罩层不支持width:100%解决技巧
心随梦飞
06-06 671
今天在写前端遮罩层时碰到一个问题，使用绝对定位给图片添加透明遮罩层时，遮罩层用width:100%，在IE6下不兼容，IE7+没问题，因为IE6下的这个100%不是针对父级容器，而是针对一个指定高度的祖先容器（高度不为auto的容器）。解决办法是：给遮罩层父容器，即 position:relative; 的类名添加 overflow:hidden; 属性。            给遮罩层添加高度大
IE6中Div 遮罩层覆盖不住select控件的解决方法
每天=生命的最后一天
12-19 7713
      又是一周干着测试员的工作，没有任何任务安排，只得自己找bug来填充每天的日子。       突然想到上次在演示的时候，看到在IE6下同事自己写的弹出提示框无法遮住select下拉选择框的问题。当时是去掉了那个下拉框来解决这个问题，但是页面还有很多地方用到这个提示框。       用IE6运行一下发现很多页面都存在这个问题。       后来同事说在每个页面跳用这个函数之前隐
jQuery实现简单网页遮罩层/弹出层效果兼容IE6、IE7
12-10
这是多么能让千万只草原上的马儿奔腾的要求~~~ 先实现一个比较简单的功能： 需求：网页遮罩层/弹出层，兼容IE6 幸好本屌丝以前聪明收集了个js的版本，so，自己改写成了jQuery插件形式的，方便以后使用。 屁话不多放...
jQuery实现可兼容IE6的遮罩功能详解
10-19
主要介绍了jQuery实现可兼容IE6的遮罩功能,详细分析了jQuery遮罩层的布局、样式及功能实现技巧,需要的朋友可以参考下
JS遮罩层效果 兼容ie firefox jQuery遮罩层
10-29
本篇将详细讲解如何使用JavaScript，尤其是jQuery实现一个兼容IE、Firefox等浏览器的高效遮罩层效果。 首先，我们看到代码引入了jQuery库，这表明我们将利用jQuery提供的便利API来实现功能。jQuery是一个流行的...
关于IE6遮罩层的问题
weixin_30687587的博客
11-05 55
<div class="mark"></div> 这是一个遮罩层，在很多情况下需要用到遮罩层，如放大镜啊，弹出框啊等等。这些效果需要遮罩层透明，理所当然地会这样写样式 .mark {width:100%; height:100%; position:absolute; z-index:2; left:0px; top:0px; background:#fff...
自写jQuery插件，实现简单网页遮罩层/弹出层功能，兼容IE6、IE7
05-06
实现弹出网页遮罩层，可兼容IE6/IE7/IE+++等； 缩放浏览器时，内容狂始终居中； 有点小bug，在IE6下，遮罩层颜色没透明，屎黑色，等我有空完善下。
简单的jQuery弹出遮罩层小插件，可移动，兼容IE678.rar
07-09
自己原创的一款简单的jQuery弹出遮罩层小插件，弹出的层可移动、也可以关闭，时间关系没有进行美化，经过测试在IE6、7、8下都没有问题，其它浏览器没有测试。
遮罩层提示框，可拖动（兼容IE、FF与谷歌）
11-20
JS遮罩层，可拖动（兼容IE、FF与谷歌）
css div 遮罩层 兼容IE6-IE9 FireFox
kongwei521的专栏
10-11 3130
Html代码： 数据加载中，请稍后... CSS样式： /*loading加载遮罩层css*/ #black_overlay { position: fixed; z-index: 1000; width: 100%; height: 100%; top: 0; left: 0; filter: alpha(opacit
兼容各浏览器的遮罩层css代码
sl332453759的专栏
01-03 244
.div-dialog-mask{ background: #000000; opacity: 0.7;/*非IE滤镜*/ filter:alpha(opacity=70);/*IE滤镜*/ z-index:1987; position: fixed; /*虽然IE6不支持fixed，这里依然可以兼容ie6*/ left: 0px; top: 0px; ...
ie6遮罩层兼容 100%高度的实现
11-29 83
.black { position:absolute;width:100%;height:100%;opacity:0.5;filter:alpha(opacity=50);background:#000; _height:expression(document.body.offsetHeight+"px") } <div class="black"><...
兼容IE（6）、FF遮罩层处理
NiuJinMing
10-27 92
[code="html"] 兼容FF、IE 遮罩 function divShow() { //遮罩层 var sClientWidth = top.document.documentElement.scrollWidth; var sClientH...
IE6-IE9浏览器兼容性问题与解决方案汇总
"IE6-IE9兼容性问题列表及解决办法" 本文档详尽地列举了从Internet Explorer 6 (IE6) 到 Internet Explorer 9 (IE9) 在HTML、CSS、JavaScript以及DOM方面存在的兼容性问题，并提供了相应的解决策略。以下是各个章节...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值