<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自定义模态框</title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<style>
.cover {
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: darkgrey;
z-index: 999;
}
.modal {
width: 600px;
height: 400px;
background-color: white;
position: fixed;
left: 50%;
top: 50%;
margin-left: -300px;
margin-top: -200px;
z-index: 1000;
}
.hide {
display: none;
}
</style>
</head>
<body>
<input type="button" value="弹" id="i0">
<div class="cover hide"></div>
<div class="modal hide">
<label for="il">姓名</label>
<input id="i1" type="text">
<label for="i2">爱好</label>
<input id="i2" type="text">
<input type="button" id="i3" value="关闭">
</div>
<script>
var tbutton = $("#i0")[0];
tbutton.onclick = function () {
//这里是将jq对象[0]拿到DOM对象
var coverEle = $(".cover")[0];
var modalEle =$(".modal")[0];
$(coverEle).removeClass("hide");
$(modalEle).removeClass("hide");
//这是DOM对象的操作
// coverEle.classList.toggle("hide");
// modalEle.classList.toggle("hide");
};
var button = $("#i3")[0];
button.onclick = function () {
//这里是将jq对象[0]拿到DOM对象
var coverEle = $(".cover")[0];
var modalEle =$(".modal")[0];
$(coverEle).addClass("hide");
$(modalEle).addClass("hide");
//这是DOM对象的操作
// coverEle.classList.toggle("hide");
// modalEle.classList.toggle("hide");
};
</script>
</body>
</html>
