How to achieve the effect of hiding by clicking on a blank space in js (code)-JS Tutorial-php.cn

How to achieve the effect of hiding by clicking on a blank space in js (code)

不言

Release： 2018-08-14 16:44:51

Original

2372 people have browsed it

The content of this article is about how js can achieve the effect of hiding by clicking on a blank space (code). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

The technology stack involves methods to prevent bubbling and how to determine whether the clicked object is the current object, which are common knowledge points in work.

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        body {
            height:2000px;
        }
        #mask {
            width: 100%;
            height: 100%;
            opacity: 0.4;   /*半透明*/
            filter: alpha(opacity = 40);  /*ie 6半透明*/
            background-color: black;
            position: fixed;
            top: 0;
            left: 0;
            display: none;
        }
        #show {
            width: 300px;
            height: 300px;
            background-color: #fff;
            position: fixed;
            left: 50%;
            top: 50%;
            margin: -150px 0 0 -150px;
            display: none;
        }
    </style>
</head>
<body>
<a href="javascript:;" id="login">注册</a>
<a href="javascript:;">登录</a>
<p id="mask"></p>
<p id="show"></p>
</body>
</html>
<script>
    function $(id) { return document.getElementById(id);}
    var login = document.getElementById("login");
    login.onclick = function(event) {
        $("mask").style.display = "block";
        $("show").style.display = "block";
        document.body.style.overflow = "hidden";  // 不显示滚动条
        //取消冒泡
        var event = event || window.event;
        if(event && event.stopPropagation)
        {
            event.stopPropagation();
        }
        else
        {
            event.cancelBubble = true;
        }
    }
    document.onclick = function(event) {

        var event = event || window.event;
        // alert(event.target.id);  // 返回的是点击的某个对象的id 名字
        // alert(event.srcElement.id);
        var targetId = event.target ? event.target.id : event.srcElement.id;
        // 看明白这个写法
        if(targetId != "show")  // 不等于当前点点击的名字
        {
            $("mask").style.display = "none";
            $("show").style.display = "none";
            document.body.style.overflow = "visible"; // 显示滚动条
        }
    }
</script>

Copy after login

Related recommendations:

An example of using template engine in js (code)

js implementation is similar to Lenovo Key Word search function (with code)

The above is the detailed content of How to achieve the effect of hiding by clicking on a blank space in js (code). For more information, please follow other related articles on the PHP Chinese website!