Question

我不理解这个例子：

[code]
     <!DOCTYPE html>
        <html>
        <head>
        <style>
        /* The Modal (background) */
        .modal {
            display: none; /* Hidden by default */
            position: fixed; /* Stay in place */
            z-index: 1; /* Sit on top */
            padding-top: 100px; /* Location of the box */
            left: 0;
            top: 0;
            width: 100%; /* Full width */
            height: 100%; /* Full height */
            overflow: auto; /* Enable scroll if needed */
            background-color: rgb(0,0,0); /* Fallback color */
            background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
        }

        /* Modal Content */
        .modal-content {
            background-color: #fefefe;
            margin: auto;
            padding: 20px;
            border: 1px solid #888;
            width: 80%;
        }

        /* The Close Button */
        .close {
            color: #aaaaaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
        }

        .close:hover,
        .close:focus {
            color: #000;
            text-decoration: none;
            cursor: pointer;
        }
        </style>
        </head>
        <body>

        <h2>Modal Example</h2>

        <!-- Trigger/Open The Modal -->
        <button id="myBtn">Open Modal</button>

        <!-- The Modal -->
        <div id="myModal" class="modal">

          <!-- Modal content -->
          <div class="modal-content">
            <span class="close">&times;</span>
            <p>Some text in the Modal..</p>
          </div>

        </div>

        <script>
        // Get the modal
        var modal = document.getElementById('myModal');

        // Get the button that opens the modal
        var btn = document.getElementById("myBtn");

        // Get the <span> element that closes the modal
        var span = document.getElementsByClassName("close")[0];

        // When the user clicks the button, open the modal 
        btn.onclick = function() {
            modal.style.display = "block";
        }

        // When the user clicks on <span> (x), close the modal
        span.onclick = function() {
            modal.style.display = "none";
        }



        // When the user clicks anywhere outside of the modal, close it
        window.onclick = function(event) {
            if (event.target == modal) {
                modal.style.display = "none";
            }
            else
            alert("Mongoose");
        }
        </script>

        </body>
        </html>
    [/code]

我不理解的部分是：

if (event.target == modal) {
        modal.style.display = "none";
    }

我原以为，因为它应该在模态之外点击，它会是

if (event.target !=modal)

event.target引用了什么？

Answer 1

在W3schools代码示例中，我认为modal中的(event.target == modal)实际上是指 var 模式（见下文）本身是指背景 div id myModal 。

<!-- The Modal -->
    <div id="myModal" class="modal">

和

// Get the modal
    var modal = document.getElementById('myModal');

（W3schools示例中div myModal 的类名称也是模态，这真的非常令人困惑。）

实际模态“box”div的类是模态内容。

包含“background”div类的较大类是 modal ，它会填充模式框本身外的浏览器窗口中的剩余负空间（参见下图）。

http://imgur.com/a/gKyoy

http://imgur.com/a/xOzmQ

它知道点击模态框之外的东西，因为它检测到单击了背景div。 background div的 id 是myModal，存储在 var 模式中，modal中的(event.target == modal)。

注意：我不是模态专家，所以我的理解可能有些偏差（如果有人有任何更正，请随意评论或发布更好的答案），但我希望这能指出你的权利方向弄清楚这个令人困惑的例子。

event.target在这个W3学校模式示例中引用了什么？

1 个答案: