js鼠标点击弹出悬浮框（js点击弹窗遮罩）
js鼠标点击弹出悬浮框（js点击弹窗遮罩）<!-- 遮罩 --><button id="btn">点击</button> <title>点击弹窗遮罩</title></head><body>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>点击弹窗遮罩</title>
</head>
<body>
<button id="btn">点击</button>
<!-- 遮罩 -->
<div class="cover" id="cover"></div>
<!-- 弹框 -->
<div class="grid" id="grid_box">
<span class="grid_close">x</span>
<h3>标题</h3>
<div>hahaha</div>
</div>
</body>
</html>
css<style type="text/css">
.cover{
display: none;
position: fixed;
width:100%;
height:100%;
z-index:2;
background: rgba(102 102 102 0.7);
top:0;
left:0;
}
.grid{
display: none;
position: fixed;
z-index: 3;
width: 500px;
min-height: 300px;
top:50%;
left:50%;
margin: -150px 0 0 -250px;
background: #fff;
padding: 15px;
border-radius:10px;
}
.grid_close{
background: #fff;
float:right;
}
</style>
js<script type="text/javascript">
var Btn = document.getElementById('btn')
Cover = document.getElementById('cover')
Box = document.getElementById('grid_box')
GridClose = Box.getElementsByClassName('grid_close')[0];
//点击弹出弹窗
Btn.onclick =function(){
ShowHide(true Cover Box);
}
//点击关闭按钮关闭弹窗
GridClose.onclick=function(){
ShowHide(false Cover Box);
}
//点击遮罩空白关闭弹窗
Cover.onclick=function(){
ShowHide(false Cover Box);
}
//关闭公用方法
function ShowHide(Bool item1 item2){
for (var i = 1 len=arguments.length; i<len; i ) {
if (Bool) {
arguments[i].style.display="block";
}else{
arguments[i].style.display="none";
}
}
}
</script>
