overlay

CSS for Overlay

by divayang

HTML

<div class="overlay"></div>

<div style="position:absolute;z-index:1000;top:30px;">
	<input type="button" onClick="document.getElementById('myDiv').style.height='1500px'" value="模拟超高页面" />
	<input type="button" onClick="document.getElementById('myDiv').style.height='100px'" value="普通高度页面" />
</div>
<div id="myDiv" style="width:980px; height:100px;margin:0 auto;font-size:20px; color:green; background:yellow;">
我是杯具的测试文字;我是杯具的测试文字;我是杯具的测试文字;我是杯具的测试文字;我是杯具的测试文字;
</div>

CSS

/***
 * 透明遮层全屏铺满样式
 * Last Update:		2013.05.14
 * Author:			Dan Yang
 * Weibo:			http://weibo.com/divayang
 * Email:			[email protected]
***/

/** 实现方式1 （推荐）
	存大的问题：
	1、当在文档内容超高的情况下，横向的水平滚动条也会莫明的出现。
**/

html {
	overflow-y:auto;
}
body {
	padding:0;
	margin:0;
	_background: url(about:blank) fixed;
}
.overlay {
	position:fixed !important;
	position:absolute;
	z-index: 999;
	background:#000;
	top:0;
	bottom:0;
	left:0;
	right:0;
	filter: alpha(opacity=50);
	opacity: 0.5;
	overflow:hidden;
	_top:expression((document).documentElement.scrollTop);
	_left:expression((document).documentElement.scrollLeft);
	_width:expression((document).documentElement.clientWidth);
	_height:expression((document).documentElement.clientHeight);
}

/** 实现方式2 
	存大的问题：
	1、IE6下当文档内容超出浏览器可可视区域时（无论是宽度还是高度超出可视区域），
		横向和纵向的滚动条都会同时出现
**/
/*
html { 
	overflow-y:auto;
	_background:url(about:blank) fixed;
}
body { 
	padding:0;
	margin:0; 
	_height:100%;
}
.overlay{
	position:fixed !important;
	position:absolute;
	z-index: 999;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	filter: alpha(opacity=50);
	opacity: 0.5;
	overflow: hidden;
	background-color: #000;
	_left:expression(documentElement.scrollLeft+documentElement.clientWidth-this.offsetWidth); 
	_top:expression(documentElement.scrollTop+documentElement.clientHeight-this.offsetHeight);
}
*/