HTML实现点击弹窗外部关闭弹窗的方法咨询

不需要新增div，你现有的代码里已经有#overlay这个全屏遮罩层了，它正好可以用来触发点击外部关闭弹窗的操作——因为遮罩层在弹窗下方、覆盖整个页面，点击遮罩层就等同于点击弹窗外部区域。

修改步骤 #

给overlay添加onclick事件，逻辑和关闭按钮的事件一致：

var closePopup = document.getElementById("popupclose");
var overlay = document.getElementById("overlay");
var popup = document.getElementById("popup");
var button = document.getElementById("button");

// Close Popup Event
closePopup.onclick = function () {
    overlay.style.display = 'none';
    popup.style.display = 'none';
};

// 新增：点击遮罩层（弹窗外部）关闭弹窗
overlay.onclick = function () {
    overlay.style.display = 'none';
    popup.style.display = 'none';
};

// Show Overlay and Popup
button.onclick = function () {
    overlay.style.display = 'block';
    popup.style.display = 'block';
}

完整可运行代码示例 #

<!DOCTYPE html>
<html>
<head>
<style>
#overlay {
    display: none;
    position: absolute;
    top: 0;
    bottom: 0;
    background: #99999945;
    width: 100%;
    height: 100%;
    opacity: 0.8;
    z-index: 100;
}

#popup {
    display: none;
    position: absolute;
    top: 25%;
    background: #fff;
    width: 80%;
    margin-left: 10%;
    z-index: 200;
    border-radius: 4px;
}

#popupclose {
    float: right;
    padding: 2px;
    cursor: pointer;
}

.popupcontent {
    padding: 10px;
}

#button {
    cursor: pointer;
}
</style>
</head>
<body>
<button id="button" class="button btn--primary">Open div</button>

<div id="overlay"></div>
<div id="popup">
    <div class="popupcontrols">
        <span id="popupclose">Close X</span>
    </div>
    <div class="popupcontent">
        Content inside popup
    </div>
</div>

<script>
var closePopup = document.getElementById("popupclose");
var overlay = document.getElementById("overlay");
var popup = document.getElementById("popup");
var button = document.getElementById("button");

closePopup.onclick = function () {
    overlay.style.display = 'none';
    popup.style.display = 'none';
};

overlay.onclick = function () {
    overlay.style.display = 'none';
    popup.style.display = 'none';
};

button.onclick = function () {
    overlay.style.display = 'block';
    popup.style.display = 'block';
}
</script>
</body>
</html>

额外优化（可选） #

如果担心点击弹窗内部时误触关闭，可以给弹窗添加阻止事件冒泡的逻辑，避免点击弹窗时触发遮罩层的关闭事件：

popup.onclick = function(e) {
    e.stopPropagation(); // 阻止点击弹窗的事件传递到下方的overlay
};

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