<!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" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style>
*{
margin:0;
padding:0;
}
#hui{
width:100%;
height:100%;
position:fixed;
left:0;
top:0;
opacity:0.4; /*半透明*/
background-color: gray;
display:none;
}
#kong{
width:200px;
height:200px;
background-color: #fff;
margin:100px auto;
display:none;
}
body{
height:3000px;
}
</style>
</head>
<body>
<a href="javascript:;" id="zhuce">注册</a>
<a href="javascript:;">登陆</a>
<div id="hui">
<div id="kong"></div>
</div>
</body>
</html>
<script>
//点击注册时，hui的和kong的都会显示，滚动条隐藏； 点击kong的，hui的和kong的会隐藏,滚动条会显示
var zhuce=document.getElementById("zhuce");
var hui=document.getElementById("hui");
var kong=document.getElementById("kong");
zhuce.onclick=function (event) {
var event=event||window.event;
var targetId=event.target? event.target.id : event.srcElement.id; //首先判断当前对象（兼容性写法),返回的是点击的某个对象的id名字
if(targetId=="zhuce")
{
hui.style.display="block";
kong.style.display="block";
document.body.style.overflow="hidden"; //滚动条不显示
//取消冒泡，因为点击注册时，也同时是在点击document
if(event && event.stopPropagation)
{
event.stopPropagation();
}
else{
event.cancelBubble=true;
}
}
}
kong.onclick=function (event) {
var event=event||window.event;
var targetId=event.target? event.target.id : event.srcElement.id;
if(targetId=="kong")
{
hui.style.display="none";
kong.style.display="none";
document.body.style.overflow="visible";
}
}
</script>
