<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>點擊空白隱藏內容</title>
<style>
body {
height: 2000px;
}
.mask {
width: 100%;
height: 100%;
opacity: 0.4; /*半透明*/
filter: alpha(opacity = 40); /*ie 6半透明*/
background-color: black;
position: fixed;
top: 0;
left: 0;
display: none;
}
.show {
width: 300px;
height: 300px;
background-color: #fff;
position: fixed;
left: 50%;
top: 50%;
margin: -150px 0 0 -150px;
display: none;
}
</style>
</head>
<body>
<a href="javascript:;" >註冊</a>
<a href="javascript:;" id="login">登錄</a>
<div class="mask" id="mask"></div>
<div class="show" id="show"></div>
</body>
</html>
<script>
function $(id) {
return document.getElementById(id);
}
var login = document.getElementById("login");
login.onclick = function (event) {
$("mask").style.display = "block";
$("show").style.display = "block";
document.body.style.overflow = "hidden";
/*阻止冒泡*/
var event = event || window.event;
if (event && event.stopPropagation()) {
event.stopPropagation();
}else {
event.cancelBubble = true;
}
}
document.onclick = function (event) {
var event = event || window.event;
var targetId = event.target ? event.target.id : event.srcElement.id;
if (targetId != "show") {
$("mask").style.display = "none";
$("show").style.display = "none";
document.body.style.overflow = "visible";
}
}
</script>
