js遮罩层应用

最新推荐文章于 2024-02-18 02:37:57 发布

海龟先生plus

最新推荐文章于 2024-02-18 02:37:57 发布

阅读量947

点赞数 1

分类专栏： js

本文链接：https://blog.csdn.net/qq_45219069/article/details/94589103

版权

js 专栏收录该内容

70 篇文章 1 订阅

订阅专栏

   *{
            margin: 0;
            padding: 0;
        }
        body,html{
            width: 100%;
            height: 100%;/*父元素设置100%，box才可以100%*/
        }
        .box{
            width: 100%;
            height: 100%;
            background-color: rgb(0, 0,0,0.5);/*注意*/
            position: absolute;
            top: 0;
            left: 0;
            display: none;
        }
        .box .login{
            width: 200px;
            height: 200px;
            background-color: gold;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            display: none;
            z-index: 999;
        }
    </style>
</head>

<body>
    <input type="button" value="登录" id="btn">
    <div class="box">
        <div class="login"></div>
    </div>
    <script>
        //遮罩层，通过点击按钮，将隐藏的遮罩和登录框出现，同时点击登录框可以跳转，点击其它的，遮罩隐藏(注意遮罩层的设置，rgb)
        //获取元素
        var btn = document.querySelector("#btn")
        var box = document.querySelector(".box")
        var login = document.querySelector(".login")
        //绑定事件
        btn.onclick = function (event) {//按钮绑定事件
            var event = event || window.event
            box.style.display = "block"//出现
            login.style.display = "block"//冒泡只能往上级冒
            stopBuble(event);           //调用阻止冒泡函数,冒泡是相同事件才冒，点击按钮和下面的document.onclick相同了
                                        //等于执行了block又立马执行下面的document.onclick的none
        }
        document.onclick = function (event) {//设置点击文档时，隐藏，需要一个事件委托target，它可以实现点哪个
            var event=event||window.event   //元素就得到哪个元素，需要他来做个判断，点到login时候，跳转
            var target=event.target||target.srcElement//兼容
            if(target.className=="login"){//判断target的元素名className是否和需要的一样
                location.href = "http://www.baidu.com";
            }else{
                 box.style.display = "none"
                 login.style.display="none"
                event.stopPropagation();//相同事件，阻止冒泡
            }
        }
        function stopBuble(e){
        if(e.stopPropagation){
            e.stopPropagation();
        }else{
            e.cancelBubble = true;
            }
        }
    </script>

在这里插入图片描述

海龟先生plus

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
js遮罩层应用

*{ margin: 0; padding: 0; } body,html{ width: 100%; height: 100%;/*父元素设置100%，box才可以100%*/ } .box{ width: ...
复制链接

扫一扫