单击屏幕上的任意位置（弹出窗口之外）时如何隐藏 HTML/Javascript 中的弹出框

Question

我编写了 HTML/Javascript，以便在用户单击链接时在 HTML 页面上显示一个弹出框。弹出窗口有效，可以通过单击 x 按钮关闭。我想添加一些功能，以便当用户单击弹出框之外的任何位置时也关闭弹出窗口。

代码如下：

<a href="#" id="popupLink" onclick="showPopup('This is test popup message'); return false;">poup test link</a>

  <div id="popupContainer" class="popup-container">
    <div id="popupContent" class="popup-content">
        <!-- Content for the popup -->
    </div>
    <button id="popupClose" class="close-button">&times;</button>
  </div>

javascript如下：

function showPopup(content) {
    // Get the elements by their ID
    var popupLink = document.getElementById("popupLink");
    var popupContainer = document.getElementById("popupContainer");
    var popupWindow = document.getElementById("popupContent");
    var popupClose = document.getElementById("popupClose");
    // Set the content for the popup
    popupWindow.innerHTML = content;
    
    // Show the pop-up window
    popupContainer.style.display = "block";

    // Hide the pop-up window when the close button is clicked
    popupClose.addEventListener("click", function() {
        popupContainer.style.display = "none";
    });
}

我尝试添加文档级事件监听器。但它不起作用。添加此后，弹出窗口根本不显示。

document.addEventListener("click", function(event) {
        // Check if the clicked element is not inside the popup and not the link that opens it
        if (!popupContainer.contains(event.target) && event.target !== popupLink && popupContainer.style.display === "block") {
            console.log("inside the if block")
            popupContainer.style.display = "none";
        }
    });

Answer 1

你在这里：

function showPopup(content) {
    var popupContainer = document.getElementById("popupContainer");
    var popupWindow = document.getElementById("popupContent");
    var popupClose = document.getElementById("popupClose");

    popupWindow.innerHTML = content;
    popupContainer.style.display = "block";

    popupClose.addEventListener("click", function() {
        popupContainer.style.display = "none";
    });

    document.addEventListener("click", closePopupOutside);
}

function closePopupOutside(event) {
    var popupLink = document.getElementById("popupLink");
    var popupContainer = document.getElementById("popupContainer");
    var popupWindow = document.getElementById("popupContent");

    if (!popupWindow.contains(event.target) && event.target !== popupLink) {
        popupContainer.style.display = "none";
        document.removeEventListener("click", closePopupOutside);
    }
}

.popup-container {
    display: none;
}

/* Your styles for the popup */

<a href="#" id="popupLink" onclick="showPopup('This is test popup message'); return false;">poup test link</a>

<div id="popupContainer" class="popup-container">
    <div id="popupContent" class="popup-content">
        <!-- Content for the popup -->
    </div>
    <button id="popupClose" class="close-button">&times;</button>
</div>

Answer 2

在这里，由于您是在弹出容器实际显示之前添加此事件侦听器，因此当时可能无法在事件侦听器的范围内访问 popupContainer 变量。

function showPopup(content) {
    // Get the elements by their ID
    var popupLink = document.getElementById("popupLink");
    var popupContainer = document.getElementById("popupContainer");
    var popupWindow = document.getElementById("popupContent");
    var popupClose = document.getElementById("popupClose");
    // Set the content for the popup
    popupWindow.innerHTML = content;
    
    // Show the pop-up window
    popupContainer.style.display = "block";

    // Hide the pop-up window when the close button is clicked
    popupClose.addEventListener("click", function() {
        popupContainer.style.display = "none";
    });

    // Add document-level event listener to close popup when clicked outside
    document.addEventListener("click", function(event) {
        // Check if the clicked element is not inside the popup and not the link that opens it
        if (!popupContainer.contains(event.target) && event.target !== popupLink && popupContainer.style.display === "block") {
            popupContainer.style.display = "none";
        }
    });
}

<a href="#" id="popupLink" onclick="showPopup('This is test popup message'); return false;">poup test link</a>

<div id="popupContainer" class="popup-container">
   <div id="popupContent" class="popup-content">
        <!-- Content for the popup -->
   </div>
   <button id="popupClose" class="close-button">&times;</button>
</div>