通过单击外部关闭弹出 div

2022-01-20 00:00:00 popup javascript

我是编程的初学者.我一直在寻找答案，但我找到的答案似乎都没有解决我的问题.我使用了 如何javascript css popup div是否居中，无论屏幕分辨率如何?问题中解释的弹出div方法.

I am a total beginner in programming. I have been searching for an answer but none of the ones I have found seem to solve my problem. I used the how do I center javascript css popup div, no matter what the screen resolution? pop up div method explained in the question.

是否可以通过单击外部的 div 来关闭它，只需对以下代码进行少量更改?

Is it possible to close a div by clicking outside of it with small changes to the following code?

<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 链接:

In HTML I have the number of divs hidden with the ids dialog1, dialog2 and so on. When a link is clicked, the div shows up and to close it I use an img link:

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

推荐答案

当你打开弹窗时，创建一个高宽为 100% 的不可见 div，它位于你弹窗 div 的后面.

When you open the pop up, create an invisible div of height width 100%, which lies at the back of your pop-up div.

在 div 上附加一个 onclick 函数:

Attach an onclick function to the div:

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

希望有帮助

相关文章