<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自定义模态</title>
<style>
.cover {
position: absolute;
background-color: rgba(0, 0, 0, 0.4);
top: 0;
right: 0;
left: 0;
bottom: 0;
z-index: 998;
}
.modal {
height: 400px;
width: 600px;
background-color: white;
position: absolute;
top: 50%;
left: 50%;
margin-left: -300px;
margin-top: -200px;
z-index: 1000;
}
.hide {
display: none;
}
</style>
</head>
<body>
<button id="b1">屠龙宝刀,点击就送</button>
<button id="b2">油腻的师姐,在哪里</button>
<div class="cover hide"></div>
<div class="modal hide">
<form action="">
<p>
<label for="">用户名:
<input type="text">
</label>
</p>
<p>
<label for="">密码:
<input type="password">
</label>
</p>
<p>
<input type="submit" value="登录">
<input id="cancel" type="button" value="取消">
</p>
</form>
</div>
<script src="jquery-3.2.1.min.js"></script>
<script>
//找出标签
$("#b1,#b2").click(function () {
//把cover和modal展示出来
$(".cover").removeClass("hide");
$(".modal").removeClass("hide");
})
$("#cancel").click(function () {
$(".cover").addClass("hide");
$(".modal").addClass("hide");
})
</script>
</body>
</html>