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">
    <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">Xa>
            <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>

你可能感兴趣的:(Javascript,javascript,css,前端)