js-实现蒙层功能

最新推荐文章于 2024-07-02 11:33:04 发布

青丝不压头颅

最新推荐文章于 2024-07-02 11:33:04 发布

阅读量968

点赞数

分类专栏： JS部分 css 文章标签： css html5 html

本文链接：https://blog.csdn.net/weixin_45630548/article/details/119938432

版权

JS部分同时被 2 个专栏收录

26 篇文章 0 订阅

订阅专栏

css

9 篇文章 0 订阅

订阅专栏

 <style>
        #mask {
            height: 100%;
            width: 100%;
            background-color: rgba(0, 0, 0, 0.1);
            position: fixed;
            top: 0;
            left: 0;
            display: none;
        }
        
        #login {
            width: 400px;
            height: 600px;
            background-color: pink;
            position: absolute;
            left: 50%;
            top: 50%;
            margin-top: -300px;
            margin-left: -200px;
            display: none
        }
        
        #close_login {
            display: inline-block;
            width: 20px;
            height: 20px;
            text-align: center;
            background-color: rgba(255, 255, 255, 0.5);
            position: absolute;
            top: -20px;
            right: 0;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <button id="login_btn">登录</button>
    <h1>今天休息呀</h1>
    <h1>今天休息呀</h1>
    <h1>今天休息呀</h1>
    <h1>今天休息呀</h1>
    <h1>今天休息呀</h1>
    <h1>今天休息呀</h1>
    <h1>今天休息呀</h1>
    <h1>今天休息呀</h1>
    <h1>今天休息呀</h1>
    <h1>今天休息呀</h1>
    <h1>今天休息呀</h1>
    <h1>今天休息呀</h1>
    <h1>今天休息呀</h1>
    <h1>今天休息呀</h1>
    <h1>今天休息呀</h1>
    <h1>今天休息呀</h1>
    <h1>今天休息呀</h1>
    <h1>今天休息呀</h1>
    <h1>今天休息呀</h1>
    <h1>今天休息呀</h1>
    <h1>今天休息呀</h1>
    <h1>今天休息呀</h1>
    <h1>今天休息呀</h1>
    <h1>今天休息呀</h1>
    <h1>今天休息呀</h1>
    <div id="mask"></div>
    <div id="login"><span id="close_login">X</span></div>
    <script>
        // 点击登录按钮显示蒙层和登录界面
        login_btn.addEventListener('click', function() {
                mask.style.display = 'block'
                login.style.display = 'block'
            })
            // 点击取消隐藏蒙层和登录
        close_login.addEventListener('click', function() {
            mask.style.display = 'none'
            login.style.display = 'none'
        })
    </script>

青丝不压头颅

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js-实现蒙层功能

<style> #mask { height: 100%; width: 100%; background-color: rgba(0, 0, 0, 0.1); position: fixed; top: 0; left: 0; display: none; } ..
复制链接

扫一扫