javascript切换遮罩层
2017-02-27 本文已影响0人
daoqing99
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.mask {
position: absolute;
top: 0px;
filter: alpha(opacity=60);
background-color: #777;
z-index: 10020;
left: 0px;
opacity: 0.5;
-moz-opacity: 0.5;
}
</style>
</head>
<body>
<div id="mask" class="mask" onclick="maskclose()"></div>
<a href="javascript:;" onclick="showMask()">点我显示遮罩层</a>
<br />
<script type="text/javascript">
//兼容火狐、IE8
//显示遮罩层
var mask = document.getElementById("mask");
function showMask() {
mask.style.height = document.body.clientHeight + 'px';
mask.style.width = document.body.clientWidth + 'px';
}
function hideMask() {
mask.style.height = 0
mask.style.width = 0
}
// 点击mask关闭
function maskclose() {
mask.style.display = "none";
hideMask()
}
</script>
</body>
</html>
