suchen

Heim >Web-Frontend >js-Tutorial >So erzielen Sie den Effekt des Versteckens, indem Sie auf eine leere Stelle in js (Code) klicken.

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

不言
不言Original
2018-08-14 16:44:512392Durchsuche

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>

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!

栈 JS 对象
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Wie sortiert die Funktion sortNumber in js ein Array?Nächster Artikel：Wie sortiert die Funktion sortNumber in js ein Array?

In Verbindung stehende Artikel

Mehr sehen