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 >

As a starter you would need a way of registering a mouseclick on the document and then closing the popup from there. Without your code thats as far as I can go — Mark Walters, May 31 '13 at 09:53
I am using the same code that is in the link! But I will post it here! Thank you! — Kristine, May 31 '13 at 09:53

score 9 · Accepted Answer · answered May 31 '13 at 09:54

9

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

answered May 31 '13 at 09:54

SHANK

2,978
23
31

Thank you very much! I will write back after I check it! – Kristine May 31 '13 at 10:05
Hei! Thank you very much, it worked! I tried two methods, first was: I added every closePopUp function for every div to #cover, but that was way too long and your way is much better! Sorry for answering only now! – Kristine Jul 10 '13 at 13:39
Done! I can only accept,not upvote because I started using this site recently! Thank you for your time and knowledge! – Kristine Jul 11 '13 at 11:04

score 4 · Answer 2 · answered Jan 28 '15 at 20:05

4

var $popup = $('#your-popup');

$('body').on('click', function(ev) {
   $popup.hide(); // click anywhere to hide the popup; all click events will bubble up to the body if not prevented
});

$popup.on('click', function(ev) {
   ev.stopPropagation(); // prevent event from bubbling up to the body and closing the popup
});

answered Jan 28 '15 at 20:05

mpen

272,448
266
850
1,236

This is an elegant solution, however your document listeners will no longer work inside the popup. For example I have `$(document).on('click', '.btn-delete', function() {confirm('really delete this?')});` – William Randokun Nov 29 '19 at 10:35
@WilliamRandokun Yeah.. it's not perfect. If you have a backdrop it's easier to just put the click handler on that. – mpen Nov 30 '19 at 21:47

score 0 · Answer 3 · answered May 31 '13 at 10:00

Without creating an invisible div just with javascript:

add this:

function getOffset(el) {
    var _x = 0;
    var _y = 0;
    while( el && !isNaN( el.offsetLeft ) && !isNaN( el.offsetTop ) ) {
        _x += el.offsetLeft - el.scrollLeft;
        _y += el.offsetTop - el.scrollTop;
        el = el.offsetParent;
    }
    return { top: _y, left: _x };
}

// function to check intersection rectangle <-> point
function intersects(ax1, ay1, ax2, ay2, px, py) {
    return !(ax2 < px || ax1 > px || ay2 < py || ay1 > py);
}

document.onclick = function(event) {
    var dialog = document.getElementById('dialog');
    var offset = getOffset(dialog);
    var ax1 = offset.left;
    var ay1 = offset.top;
    var ax2 = ax1 + 300 /* dialog width */;
    var ay2 = ay1 + 300 /* dialog height */;

    if(!intersects(ax1, ay1, ax2, ay2, event.pageX, event.pageY)) {
        closePopUp('dialog');
    }
};

Avoiding the invisible div looks interesting, but, what if some element in the page stops the propagation of the event, it would break popup auto close, no? — Alvaro Rivoir, Sep 07 '19 at 12:50

score 0 · Answer 4 · answered May 31 '13 at 10:12

Yes... Important you remove the overlay and that is <div class="ui-widget-overlay ui-front"></div> when use the Jquery 2.0.0.js... (It may be that with the previous libraries change the name)

Example...

<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.0.0.js"></script>

    <script type="text/javascript" src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<link href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css"/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
</head>
    <script type="text/javascript">
// <---- VENTAÑAS DE PARAMETERES---->
$(document).ready(function() { 
$( "#wnd_Paramedit" ).dialog({
                autoOpen: false,
                height: 'auto',
                width: 405,
                modal: true,
                resizable:false,
                buttons: {
                    "Accept": function() {


                        $( this ).dialog( "close" );    
                    },
                    Cancel: function() {
                        $( this ).dialog( "close" );
                    }
                },
                close: function() {
                    $( this ).dialog( "close" );
                }
            });

            $( "#btn_Pedit" ).click(function() {
                    $( "#wnd_Paramedit" ).dialog( "open" );
$("div").removeClass("ui-widget-overlay ui-front");
                });
});
</script>
<body>
<h3>List of parameters</h3>
<div id="sortparam" >


</div>
<input type="button" id="btn_Pedit" value="Edit"/>
<div id="wnd_EditParam" title="Edit Parameter"></div>
</body>
<div id="wnd_Paramedit" title="Choose parameter" >
    <label> inserta el nombre del Parameter que quiere modificar<label><br />
    <label> ID <input type=text size=30 id="med"></label>      
</div>
</html>

Now you can create the other particular button for close the window pop up and you paste this specific code for close:

$( "#wnd_Paramedit" ).dialog("close");

or

$( "#wnd_Paramedit" ).dialog("destroy");

Close pop up div by clicking outside of it

4 Answers4

Linked