手写弹出框代码详解

1.代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="content-Type" charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <title>Title</title>
    <style>
        .cover{
            position: fixed;
            /*首先将位置固定住*/
            top:0;
            right:0;
            bottom:0;
            left:0;
            /*上下左右设置都为0*/
            background-color: rgba(0,0,0,0.2);

            z-index:99;
            /*指定一个元素的堆叠顺序,数值越大,表示在越上边*/
        }
        .modal{
            width:700px;
            height:400px;
            position: absolute;
            top:50%;
            left:50%;
            margin-left: -350px;
            margin-top: -200px;
            background-color: white;
            z-index: 100;
            /*将x的位置移动*/
        }
        .close{
            float: right;
            /*在这里将x移动到右上角*/
            margin-right: 15px;
            margin-top: 10px;
            font-size: 16px;
        }
        .hide{
            display: none;
            /*表示不显示*/
        }
    </style>
</head>
<body>

<button id="b1">点我弹出</button>

<div class="cover hide" ></div>
<!--这个标签通过设置CSS样式,将button及下层的东西盖住,比如注册登录窗口的弹出就需要这个-->
<!--hide表示不显示这个div标签,注意这个hide写在class里边-->

<div class="modal hide" >
    <span class="close" id="s1">&times;</span>
    <!--&times;表示x的意思,也可以直接写x-->
</div>

<script>
    // 思考如何实现,在点击弹出按钮之后,弹出两个标签
    //首先,找标签,注意这个地方是通过id处理的
    var b1Ele=document.getElementById('b1')
    //其次,处理事件,单击button之后,找到类属性,移除类列表中的隐藏属性
    b1Ele.onclick=function (ev) {
        document.getElementsByClassName('cover')[0].classList.remove('hide');
        document.getElementsByClassName('modal')[0].classList.remove('hide');
    //移除样式
    }

        var s1Ele=document.getElementById('s1')
        //其次,处理事件,单击button之后,找到类属性,添加类列表中的隐藏属性
        s1Ele.onclick=function (ev) {
        document.getElementsByClassName('cover')[0].classList.add('hide');
        document.getElementsByClassName('modal')[0].classList.add('hide');
    //移除样式
    }
</script>
</body>
</html>
<!--目的就是:一点添加,一点关闭,这样的操作-->

代码效果:

(1)运行

(2)点击"点我弹出",结果如下图

(3)再点击x,回到界面(1)的效果,可以反复尝试

手写弹出框代码详解

猜你喜欢