Close pop up div by clicking outside of it

Question

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.

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>

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 >

Answer 1

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

Attach an onclick function to the div:

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

Hope that helps