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)

相关推荐