css——遮罩层

最新推荐文章于 2024-08-20 19:34:20 发布

spfLinux

最新推荐文章于 2024-08-20 19:34:20 发布

阅读量501

点赞数

分类专栏： css 文章标签： css 遮罩层

css 专栏收录该内容

45 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		#all_con {
			display: none;
			background-color: #000;
			width: 100%;
			height: 100%;
			left:0;
			top:0;/*FF IE7*/
			filter:alpha(opacity=30);/*IE*/
			opacity:0.3;/*FF*/
			z-index:1;
			position:fixed!important;/*FF IE7*/
			position:absolute;/*IE6*/
			_top:       expression(eval(document.compatMode &&
			document.compatMode=='CSS1Compat') ?
			documentElement.scrollTop + (document.documentElement.clientHeight-this.offsetHeight)/2 :/*IE6*/
			document.body.scrollTop + (document.body.clientHeight - this.clientHeight)/2);/*IE5 IE5.5*/
		}
		#form_login{
			display: none;
			position: relative;
			z-index: 10;
		}
	</style>
</head>
<body>
	<a href="javascript:;" id="login">登录</a>
	<div id="form_login">
		<input type="text"><br/>
		<input type="text"><br/>
		<input type="button" value="登录">
	</div>
	<div id="all_con">
		
	</div>

	<script>
		function getId(id){
			return document.getElementById(id);
		}
		login.οnclick=function(){
			getId('all_con').style.display='block';
			getId('form_login').style.display='block';
		}
	</script>
</body>
</html>

注：z-index的元素需要定位，不然z-index无效。