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 >