JavaScript练习
1.模态框
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box1 {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: #f6c2d2;
}
.box2 {
500px;
height: 500px;
background-color: white;
/*margin: 0 auto;*/
/*margin-top: 100px;*/
position: absolute;
top: 100px;
left: 50%;
margin-left: -250px;
text-align: center;
line-height: 500px;
color: red;
}
.box3 {
position: absolute;
right: 0;
top: 0;
50px;
height: 50px;
background-color: red;
color: white;
text-align: center;
line-height: 50px;
}
</style>
</head>
<body>
<input type="button" value="弹出模态框" id="btn">
<script>
var btn = document.getElementById("btn")
btn.onclick = function () {
// alert(123)
var box1 = document.createElement("div")
var box2 = document.createElement("div")
var box3 = document.createElement("div")
box2.innerText = "弹出的模态框"
box3.innerText = "X"
box1.classList.add("box1")
box2.classList.add("box2")
box3.classList.add("box3")
box1.appendChild(box2)
box2.appendChild(