<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>模态框的弹出和隐藏</title>
<style>
.cover {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(0,0,0,0.4);
}
.modal {
height: 400px;
width: 600px;
background-color: white;
position: absolute;
top:50%;
right: 50%;
margin-left: -300px;
margin-top: -200px;
}
/*隐藏*/
.hide {
display: none;
}
</style>
</head>
<body>
<button id="b1">点击弹出</button>
<!-- <div></div> 覆盖层-->
<div class="cover hide"></div>
<!--模态框-->
<div class="modal hide">
<form action="" >
<p>
<label for="">用户名:
<input type="text">
</label>
</p>
<p>
<label for="">密码:
<input type="text">
</label>
</p>
<p>
<input type="submit" value="登录">
<input id="qu" type="button" value="取消">
</p>
</form>
</div>
<!--点击事件-->
<script src="jquery-3.2.1.min.js"></script>
<script>
$("#b1").click(function () {
// 把显示出来 去掉hide
$(".cover").removeClass("hide")
$(".modal").removeClass("hide")
})
//找到取消按钮取消
$("#qu").click(function () {
$(".cover").addClass("hide")
$(".modal").addClass("hide")
})
</script>
</body>
</html>
