简单遮罩层（比较简陋，纯js）

最新推荐文章于 2024-01-25 14:46:30 发布

杨笑常

最新推荐文章于 2024-01-25 14:46:30 发布

阅读量482

点赞数

分类专栏： javascript 遮罩层文章标签： javascript 遮罩层

本文链接：https://blog.csdn.net/u012918421/article/details/51113349

版权

javascript 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

遮罩层

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        body{
            height: 1000px;
        }
        button{
            background:#FF4040;
            color: #FFFFF0;
            display: block;
            width: 60px;
            height: 30px;
            margin: 0 auto;
            outline: none;
            border: 0px;
        }
        #mask{
            display: none;
            background: #000;
            opacity: 0.75;
            filter:alpha(opacity=75);
            height: 100%;
            width: 100%;
            position: absolute;
            left:0px;
            top:0px;
            z-index: 100;
        }
        #login{
            display: none;
            position: fixed;
            left: 30%;
            top:30%;
            z-index: 101;
        }
        .loginContent{
            width: 670px;
            height: 380px;
            background: yellow;
        }
        .loginExit{
            width: 20px;
            height: 20px;
            background:blue;
            position: absolute;
            top:0px;
            right: 0px;
        }
    </style>
</head>
<body>
<button id="open">登录</button>
<!--遮罩层-->
<div id="mask"></div>
<!--登录框-->
<div id="login">
    <div class="loginContent"></div>
    <div class="loginExit"></div>
</div>
<script>
    window.onload = function(){
        var button = document.getElementById('open');
        button.onclick = function(){
            openLogin();
        };
    };
    function openLogin(){
        var mask = document.getElementById('mask');
        mask.style.display = 'block';
        /*获取页面的高和宽*/
        var sWidth = document.documentElement.scrollWidth;
        /*--------------bug------------*/
        /*当设置mask的值为1000时*/
        /*谷歌浏览器获取的高度只有46px,IE,foxfire有1000px*/
        var sHeight = document.documentElement.scrollHeight;
        /*解决方案，就是将谷歌浏览器的body设置为1000px*/
        /*document.documentElement 和 body 的区别*/
        /*url -- http://www.cnblogs.com/ckmouse/archive/2012/01/30/2332070.html*/
        /*获取页面的可视高度和可视宽度*/
        var cWidth = document.documentElement.clientWidth;
        var cHeight = document.documentElement.clientHeight;
        /*设置遮罩层的高*/
        var height = sHeight>cHeight?sHeight:cHeight;
        mask.style.height = height + 'px' ;
        var loginButton = document.getElementById('login');
        loginButton.style.display = 'block';
        /*设置login 登录框中间*/
        var loginWidth = loginButton.offsetWidth;
        var loginHeight = loginButton.offsetHeight;
        var loginOffsetWidth = cWidth>loginWidth?parseInt((cWidth-loginWidth)/2,10):cWidth;
        var loginOffsetHeight = cHeight>loginHeight?parseInt((cHeight-loginHeight)/2,10):cHeight;
        loginButton.style.left = loginOffsetWidth+'px';
        loginButton.style.top = loginOffsetHeight+'px';
        /*绑定移除事件*/
        var exit = document.getElementsByClassName('loginExit');
        exit[0].onclick = function(){
            exitMask();
        };
        mask.onclick = function(){
            exitMask();
        };
        function exitMask(){
            mask.style.display = 'none';
            loginButton.style.display = 'none';
        }
    }
</script>
</body>
</html>