点击Modal外部无法关闭？事件监听失效问题求助

问题根源 #

你的代码中.modal元素使用了全屏fixed定位，且z-index与.overlay相同，导致整个屏幕被.modal完全覆盖，点击"外部区域"时实际触发的是.modal的点击事件，而非.overlay，所以监听e.target == overlay的逻辑永远不会生效。

具体修改方案 #

1. 调整CSS（核心修复）

修改.modal的样式，让它不再全屏，仅作为内容容器居中显示：

.modal {
    display: none; /* 保持隐藏默认值 */
    position: fixed; /* 仍固定定位 */
    z-index: 2; /* 层级高于overlay，确保内容在最上层 */
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%); /* 居中 */
    width: auto; /* 自适应内容宽度 */
    height: auto; /* 自适应内容高度 */
    background-color: transparent; /* 去掉背景色，让overlay的背景显示出来 */
    padding: 0; /* 移除多余内边距 */
    position: relative; /* 为关闭按钮提供定位基准 */
}

.overlay的全屏样式保持不变，确保它作为底层透明背景存在。

2. 简化JS逻辑

直接监听overlay的点击事件，同时保留Modal内部点击不冒泡的逻辑：

document.addEventListener("DOMContentLoaded", function() {
    var overlay = document.getElementById("overlay");
    var modal = document.getElementById("imageModal");
    var modalImg = document.getElementById("modalImage");
    var captionText = document.getElementById("caption");
    var closeButton = document.getElementsByClassName("close")[0];

    // 打开Modal
    document.querySelectorAll(".modal-trigger").forEach(function(img) {
        img.onclick = function() {
            overlay.style.display = "block";
            modal.style.display = "block";
            modalImg.src = this.src;
            captionText.innerHTML = this.alt;
        }
    });

    // 关闭按钮逻辑
    closeButton.onclick = function() {
        overlay.style.display = "none";
        modal.style.display = "none";
    };

    // 点击overlay关闭Modal
    overlay.onclick = function() {
        overlay.style.display = "none";
        modal.style.display = "none";
    };

    // 阻止Modal内部点击冒泡到overlay
    modal.onclick = function(event) {
        event.stopPropagation();
    };
});

3. 优化关闭按钮定位

调整关闭按钮的位置，让它对齐Modal内的图片右上角：

.close {
    position: absolute;
    top: -40px; /* 向上偏移至图片上方 */
    right: 0;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
}

验证效果 #

修改后，点击图片可正常打开Modal，点击关闭按钮、Modal外部的overlay区域都能触发关闭，点击Modal内部的图片或标题则不会关闭弹窗。

内容的提问来源于stack exchange，提问作者newuser