javaScript——案例演示：弹出模态框
一、实现方式一
步骤：
1.在input标签里设置button 2.设置鼠标点击事件 3.鼠标点击时出现一个弹框，并且后面的整体背景变了，要先创建好整体背景 再创建弹框内的东西 4.先创建一个块级标签box1作为整体背景，并且设置好box1的高 宽 外边框距离 背景颜色属性（在head标签下建style标签写），此时新建的标签并不在文档中，要把它添加到body标签里面（先找到body标签，然后把box添加进去） 5.再创建一个box2作为弹框背景，把box2添加到box1里，再把box2添加宽高 背景颜色，并把它添加到box1下 6.让box2居中 距离顶部有距离显示（好看点） 7.在box2设置属性 文本 弹出的模态框 在文本框里，并设置文本在框中的显示位置 8.建box3设置属性x在文本框里，就是我们点击看到弹框右上角那个 x 取消 按钮，并设置字体颜色 背景颜色 宽高，并把它添加到box2下 9.还差 点击 X还原到原来页面。把box3添加点击事件。把box1从body里面移除，这样就恢复到原来了
代码演示：
<!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: #f8d7fa;
}
.box2{
width: 500px;
height: 500px;
background-color: #eeeeee;
/*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;
width: 50px;
height: 50px;
background-color: red;
color: #eeeeee;
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(111) 测试用
//只是造出来了，但不在文档
var box1=document.createElement("div")
var box2=document.createElement("div")
var box3=document.createElement("div")
box3.innerText="X"
box2.innerText="弹出来的啦"
//加上类，那么类的属性都有了，这样写解耦合
box1.classList.add("box1")
box2.classList.add("box2")
box3.classList.add("box3")
box1.appendChild(box2)
box2.appendChild(box3)
//找到一个标签，把它添加到文档里
var body=document.getElementsByTagName("body")[0]
// body.appendChild(box1) 这种或者用replaceChild都可以
body.replaceChild(box1,btn)
box3.onclick=function () {
body.removeChild(box1)
}
}
</script>
</body>
</html>
方式一
二、实现方式二
步骤：
1.在input标签里设置button 2.在box1里套box2,box2里套box3，box2里有内容 弹出模态框 ，box3里有内容X, 3.其他颜色，宽高背景等属性不变。把box1的属性display : none； 4.把box1的属性display : none； 4.设置input标签鼠标点击事件，在函数内把box1的display=“block”,让其显示 5.设置box1标签鼠标点击事件，在函数内把box1的display=“none”,让其隐藏，这样就又返回到原来状态了
代码演示：
<!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: #f8d7fa;
display: none;
}
.box2{
width: 500px;
height: 500px;
background-color: #eeeeee;
/*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;
width: 50px;
height: 50px;
background-color: red;
color: #eeeeee;
text-align: center;
line-height: 50px;
}
</style>
</head>
<body>
<input type="button" value="弹出模态框" id="btn">
<div class="box1">
<div class="box2" >弹出模态框
<div class="box3">X</div>
</div>
</div>
<script>
var btn=document.getElementById("btn")
btn.onclick=function () {
var box1=document.getElementsByClassName("box1")[0]
box1.style.display="block"
}
var box3=document.getElementsByClassName("box3")[0]
box3.onclick=function () {
var box1=document.getElementsByClassName("box1")[0]
box1.style.display="none"
}
</script>
</body>
</html>
方式二
三、拓展（让模态框内可以让用户输入）
在原来写有 弹出模态框的地方模拟让用户输入用户名密码并有提交按钮
添加步骤：
1.在box2下建form表单，里面包含 让用户输入用户名密码提交的子标签 2.在box3点击时间下设置用户名 密码的value=“”,这样这次输入后下次再打开就不会有记忆了 3.去掉之前设置box2中文字的行高，这样不会溢出，会好看
代码新增演示：
<form action="">
<p>
用户名：<input type="text" name="username">
</p>
<p>
密码：<input type="text" name="password">
</p>
<p>
<input type="button" value="提交">
</p>
</form>
---------------------------------------
document.getElementsByName("username")[0].value=""
document.getElementsByName("password")[0].value=""
----------------------------------------
line-height: 500px; //删除此行
拓展需要新增的代码
赞 (0)