javascript - 通过单击外部关闭弹出 div

Question

我完全是编程初学者。我一直在寻找答案，但我发现的答案似乎都无法解决我的问题。我用了how do I center javascript css popup div, no matter what the screen resolution?问题中解释的弹出div方法。

是否可以通过在 div 外部单击并稍微更改以下代码来关闭它？

<script type="text/javascript">
    function showPopUp(el) {
        var cvr = document.getElementById("cover")
        var dlg = document.getElementById(el)
        cvr.style.display = "block"
        dlg.style.display = "block"
        if (document.body.style.overflow = "scroll") {
            cvr.style.width = "1024"
            cvr.style.height = "100%"
        }
    }
    function closePopUp(el) {
        var cvr = document.getElementById("cover")
        var dlg = document.getElementById(el)
        cvr.style.display = "none"
        dlg.style.display = "none"
        document.body.style.overflowY = "scroll"
    }
</script>
<style type="text/css">
   #cover {
        display:        none;
        position:       fixed;
        left:           0px;
        top:            0px;
        width:          100%;
        height:         100%;
        background:     gray;
        filter:         alpha(Opacity = 50);
        opacity:        0.5;
        -moz-opacity:   0.5;
        -khtml-opacity: 0.5
    }

</style>

在 HTML 中，我使用 ID dialog1、dialog2 等隐藏了 div 的数量。单击链接时，会显示 div 并关闭它我使用 img 链接:

< a class="close" href="#2" onclick="closePopUp('dialog2');">< img src="/img/close.png" height="30px"></a >

Answer 1

当您打开弹出窗口时，创建一个高度宽度为 100% 的不可见 div，它位于弹出窗口 div 的后面。

给 div 添加一个 onclick 函数:

document.getElementById('invisibleDiv').onclick = function()
{
    document.getElementById('popup').style.display = 'none'; 
}

希望对你有帮助