So erzielen Sie den Effekt des Versteckens, indem Sie auf eine leere Stelle in js (Code) klicken.-js-Tutorial-php.cn

So erzielen Sie den Effekt des Versteckens, indem Sie auf eine leere Stelle in js (Code) klicken.

不言

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

Original

2396 Leute haben es durchsucht

Der Inhalt dieses Artikels handelt davon, wie js den Effekt des Versteckens durch Klicken auf eine Leerstelle (Code) erzielen kann. Ich hoffe, dass er für Sie hilfreich ist .

Der Technologie-Stack umfasst Methoden zur Verhinderung von Blasenbildung und zur Bestimmung, ob das angeklickte Objekt das aktuelle Objekt ist. Dies sind einige allgemeine Wissenspunkte bei der Arbeit.

<!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>

Nach dem Login kopieren

Verwandte Empfehlungen:

Ein Beispiel für die Verwendung der Template-Template-Engine in js (Code)

js-Implementierung ähnelt Lenovo Key Wortsuchfunktion (mit Code)

Das obige ist der detaillierte Inhalt vonSo erzielen Sie den Effekt des Versteckens, indem Sie auf eine leere Stelle in js (Code) klicken.. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!