js实现简易弹窗

豆子黄

已于 2022-08-02 19:54:05 修改

阅读量2.1k

点赞数 4

文章标签： javascript css 前端 html

于 2022-08-02 19:47:38 首次发布

本文链接：https://blog.csdn.net/qq_66839130/article/details/126129006

版权

代码实现：

<!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>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        html,body{
            width: 100%;
            height: 100%;
            position: relative;
        }
        #dialog{
            position: absolute;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.2);
            display: flex;
            justify-content: center;
            align-items: center;
            opacity: 0;
            transition: all 0.5s;
        }
        #box{
            width: 400px;
            height: 280px;
            box-shadow:  2px 2px 3px gray;
            background-color: #fff;
            border-radius: 5px;
            overflow: hidden;
        }
        #header{
            height: 50px;
            background-color: rgb(238, 87, 87);
            line-height: 50px;
            text-indent: 20px;
            color: white;
            letter-spacing: 3px;
            
        }
        #header span{
            float: right;
            padding-right: 20px;
            cursor: pointer;
        }
        #content{
            height: 230px;
            background-image: linear-gradient(30deg, rgb(255, 163, 163),rgb(154, 154, 255));
            display: flex;
            justify-content: space-evenly;
            align-items: center;
        }
        #content div{
            width: 150px;
            height: 150px;
            background-color: rgb(250, 235, 250);
            border-radius: 5px;
            box-shadow: 2px 2px 3px gray;
        }
        #btn{
            width: 100px;
            height: 50px;
            line-height: 50px;
            position: absolute;
            left: 20%;
            top: 10%;
            z-index: 2;
            color: orangered;
            cursor: pointer;
            background-color: rgb(158, 158, 158);
            border: none;
            border-radius: 10px;

        }
        #btn:hover{
            
            background-color: rgb(8, 247, 247);
            

        }
    </style>
</head>
<body>
    <!-- 可交互按钮 -->
    <button id="btn">我是按钮</button>
    <div id="dialog">
        <div id="box">
            <div id="header">
                会员登录
                <span id="close">[X]</span>
            </div>
            <div id="content">
                <div></div>
                <div></div>
            </div>
        </div>
    </div>
    <script>
        //获取按钮的标签，通过id名获取
        var _box=document.getElementById("box");
        var _btn=document.getElementById("btn");
        var _close=document.getElementById("close");
        var _dialog=document.getElementById("dialog");

        // 通过函数控制标签的样式变化
        // 点击按钮时
        _btn.onclick=function(){
        //按钮点击之后，弹窗背景和弹窗出现
            _dialog.style.opacity="1";
        //更改层级比，按钮高，此时不能再点击按钮
            _dialog.style.zIndex="3";
        }
        // 点击span标签时
        _close.onclick=function(){
        //点击“X号”之后，弹窗背景和弹窗消失
            _dialog.style.opacity="0";
        //此时更改层级，在按钮之下，方便再次点击
            _dialog.style.zIndex="1";
        }

    </script>
</body>
</html>