给页面增加遮罩效果

最新推荐文章于 2024-04-22 15:24:17 发布

是码农没错了

最新推荐文章于 2024-04-22 15:24:17 发布

阅读量9.2k

点赞数 2

分类专栏： js 前端文章标签：遮罩 js jQuery 前端 H5

本文链接：https://blog.csdn.net/lx_nhs/article/details/78741991

版权

js 同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

前端

3 篇文章 0 订阅

订阅专栏

一.介绍

”遮罩”效果在页面中非常常见, 例如下图百度登录页:
这里写图片描述
当弹出登录框时, 背景将变暗, 且不可选择. 其实原理就是两个div分别位于不同的z-index上, 显示时机不同.

二.demo

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <title>遮罩效果demo</title>
        <style>
            html,
            body {
                margin: 0;
                height: 100%;
            }

            #bg {
                width: 100%;
                height: 100%;
                background-color: #000;
                position: absolute;
                top: 0;
                left: 0;
                z-index: 2;
                opacity: 0.3;
                /*兼容IE8及以下版本浏览器*/
                //filter: alpha(opacity=30);
                display: none;
            }

            #loginbox {
                width: 200px;
                height: 200px;
                background-color: #FF0;
                margin: auto;
                position: absolute;
                z-index: 3;
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;
                display: none;
            }
        </style>
        <script>
            function open() {
                var s = document.getElementById("bg");
                s.style.display = "block";

                var l = document.getElementById("loginbox");
                l.style.display = "block";
            }

            function close() {
                var s = document.getElementById("bg");
                s.style.display = "none";

                var l = document.getElementById("loginbox");
                l.style.display = "none";
            }
        </script>
    </head>

    <body>
        <a href="javascript:open()">登录</a>
        <div id="bg"></div>
        <div id="loginbox">
            <a href="javascript:close()">关闭</a>
        </div>
    </body>

</html>

效果如下:

这里写图片描述

是码农没错了

关注

2
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
给页面增加遮罩效果

一.介绍 ”遮罩”效果在页面中非常常见, 例如下图百度登录页: 当弹出登录框时, 背景将变暗, 且不可选择. 其实原理就是两个div分别位于不同的z-index上, 且都是绝对定位.二.demo<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>遮罩效果demo</title>
复制链接

扫一扫