Js简朴原生实现弹框

最新推荐文章于 2023-02-24 21:42:56 发布

想被带飞的鱼

最新推荐文章于 2023-02-24 21:42:56 发布

阅读量1.5k

点赞数 2

分类专栏： Javascript 文章标签： javascript css 前端

本文链接：https://blog.csdn.net/m0_62008199/article/details/123141926

版权

Javascript 专栏收录该内容

60 篇文章 2 订阅

订阅专栏

Js简朴原生实现弹框

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>弹出框</title>
    <style>
        #main {
            width: 100%;
            height: 700px;
            background-color: rgba(82, 82, 87, 0.5);
            display: flex;
            justify-content: center;
            align-items: center;
            position: absolute;
            left: 0;
            top: 0;
            display: none;
        }

        #box {
            width: 500px;
            height: 300px;
            background-color: rgb(255, 255, 255);
            position: absolute;
            /* z-index: 999; */
        }

        a {
            text-decoration: none;
            color: black;
            float: right;
            padding-top: 10px;
            margin-right: 10px;
        }

        p {
            margin-top: 50px;
            font-size: 30px;
        }

        #box1 {
            width: 496px;
            height: 50px;
            border: 2px solid black;
        }

        #box2 {
            width: 0px;
            height: 50px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <input type="button" value="弹框" id="eject">
    <div id="main">
        <div id="box">
            <a href="#" id="stopIt">X</a>
            <p>弹出框</p>
            <div id="box1">
                <div id="box2"></div>
            </div>
        </div>
    </div>
    <script>
        let eject = document.getElementById("eject");
        let main = document.getElementById("main");
        let stopIt = document.getElementById("stopIt");
        let box2 = document.getElementById("box2");
        let timeIn;
        //点击出现弹框
        eject.onclick = function () {
            main.style.display = "flex";
            box2.style.width = "0px";
            //进度条
            timeIn = setInterval(() => {
                box2.style.width = parseInt(box2.style.width || 0) + 10 + "px";
                console.log(box2.style.width);
                if (parseInt(box2.style.width) >= 498) {
                    main.style.display = "none";
                    clearInterval(timeIn);                    
                }
            }, 200);
        }
        //点击×弹框消失
        stopIt.onclick = function () {
            main.style.display = "none";
            box2.style.width = "0px";
            clearInterval(timeIn);
        }
    </script>
</body>

</html>

想被带飞的鱼

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
Js简朴原生实现弹框

Js简朴原生实现弹框<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <
复制链接

扫一扫

专栏目录