兼容IE6的遮罩层

最新推荐文章于 2017-10-19 09:30:54 发布
最新推荐文章于 2017-10-19 09:30:54 发布
阅读量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`，它作为遮罩层，覆盖整个页面，通常具有半透明黑色背景；另...
IE6下遮罩层不支持width:100%解决技巧
心随梦飞
06-06 671
今天在写前端遮罩层时碰到一个问题，使用绝对定位给图片添加透明遮罩层时，遮罩层用width:100%，在IE6下不兼容，IE7+没问题，因为IE6下的这个100%不是针对父级容器，而是针对一个指定高度的祖先容器（高度不为auto的容器）。解决办法是：给遮罩层父容器，即 position:relative; 的类名添加 overflow:hidden; 属性。            给遮罩层添加高度大
ie6，ie7遮罩层被普通层遮住的解决方法
u010885137的博客
10-19 863
一个设置了position：absolute ； z-index ：200；的浮动层，居然被一个设置position：relative；z-index：1；或者根本没有设置z-index 的普通层遮住了。这个奇葩的现象在ie8以上是不会发生的，出现在ie6和ie7里， 解决的方法是： 方法一：限定元素和浮动元素都要设置position属性和z-index 属性，只需给absolute层设置了z
jquery实现遮罩功能（兼容IE6）
Robin022的专栏
08-31 753
最精简，最强大的 jQuery 遮罩层效果。 当浏览器改变大小时，遮罩层的大小会相应地改变。 遮罩层上方的对话框可随 scroll 的改变而改变，即对话框在浏览器居中显示。 HTML 代码 点击这里看 jQuery 遮罩层效果. 关闭 正在加载，请稍后... CSS 代码 body { font-family: Arial, Helvetica, sans-ser
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的Jquery遮盖层和弹框
胖胖的ALEX
10-22 1139
遮罩层效果 兼容ie firefox jQuery遮罩层 .mask{ display:none; position:absolute;top:0;left:0;width:100%;height:100%;background:#000;z-index:100;-moz-opacity:0.8;opacity:.80;filter:alpha(opacity=80);h
自写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与谷歌）
浏览器全屏和pc显示器全屏
过客的博客
08-05 1213
浏览器全屏 $('#DivLocker').css({ "position": "absolute", "margin-left": "1px", "margin-top": "1px", "background-color": "#000000", "height": function ()
IE6打印网页不打印背景图案
weixin_34357928的博客
01-19 163
运行IE6后，找到最右边的“工具”按钮，选择其中的“Internet选项”。如下图。 选择“Internet选项”后，会出现“Internet选项”设置窗口，选择其中的“高级”选项页。并取消下面的“打印背景颜色和图像”按钮。如下图 转载于:https://blog.51cto.com/srover/481466...
兼容IE（6）、FF遮罩层处理
NiuJinMing
10-27 92
[code="html"] 兼容FF、IE 遮罩 function divShow() { //遮罩层 var sClientWidth = top.document.documentElement.scrollWidth; var sClientH...
生成html水印,兼容IE8
弑忆 的专栏
08-23 3389
参照博客http://www.cnblogs.com/samwu/p/6580486.html 在原作者的基础上进行了少量优化，解决IE兼容性问题 /**  * 生成SVG图片并Base64编码  *   * @description 如果传入图片内容包含中文，则需要设置页面编码格式为UTF-8  * @param text 图片内容  * @param svgStyle 图
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值