Close javascript popup by clicking anywhere

Question

I am super novice and need a quick advice. I have installed a javascript based popup plugin on my wordpress site, witch opens automatically when somebody visits the site. To close the popup the user will have to click a cross X in the corner of the popup.

I need to edit the plugin so that the user can click ANYWHERE, and the plugin will close.

Here is the javascript code I found. any tips about this?

function open_lightbox(){
    //var closebut = (typeof(ujiPopups) !== 'undefined' && ujiPopups != null && ujiPopups.showclose && ujiPopups.showclose == "true") ? true : false;
    jQuery("#popup").modal({
        onOpen: function (dialog) {
            dialog.overlay.fadeIn('fast');
            dialog.data.hide();
            dialog.container.show('fast', function () {
                dialog.data.fadeIn('slow');  
            }); 
        },
        autoResize: false,
        autoPosition: true,
        escClose: false,
        zIndex: 999999,
        overlayClose: false
    });     
}

function popups_close(){
    jQuery.modal.close();
    jQuery("#popup").remove();
}

Note, this is `javascript`, not `java`. They are *very* different things. I've edited your question for you. — Rory McCrossan, Nov 01 '13 at 13:49
possible duplicate of [jQuery click off element event](http://stackoverflow.com/questions/1423671/jquery-click-off-element-event) — André Dion, Nov 01 '13 at 13:58

Stuart Kershaw · Answer 1 · 2013-11-01T14:55:55.837

6

Something like this should do it:

$(document).click(function() { 
    if($('#popup').is(':visible')) {
        popups_close();
    }
});

If you wish to keep the modal active on interaction with the popup itself:

$(document).click(function(e) {
    if (!$(e.target).is("#popup")) {
        if ($('#popup').is(':visible')) {
            popups_close();
        }
    }
});

A simple example here: http://jsfiddle.net/wnT4G/

*Check comments for some elegant revisions by @ComFreek

edited Nov 01 '13 at 14:55

answered Nov 01 '13 at 13:54

Stuart Kershaw

16,831
6
37
48

Doesn't this also close the dialog if one clicks on the dialog? – ComFreek Nov 01 '13 at 13:56
I assumed that was intended as the question doesn't indicate otherwise. I'll add a workaround. – Stuart Kershaw Nov 01 '13 at 13:56
1

Your second example won't work because `$(document).not('#popup').length == 0` ([jsFiddle](http://jsfiddle.net/Ycqyq/)). – ComFreek Nov 01 '13 at 14:21
1

I'm sorry to bother you again, but your solution is still buggy. Test case: http://jsfiddle.net/wnT4G/4/ (click on `blub`). [Here is a fix](http://jsfiddle.net/wnT4G/3/), but using event bubbling would be more elegant in my opinion: http://jsfiddle.net/wnT4G/2/ – ComFreek Nov 01 '13 at 14:43
Nice work @ComFreek, agreed. Your event bubbling example is the more elegant solution here. – Stuart Kershaw Nov 01 '13 at 14:50

score 3 · Answer 2 · edited Nov 21 '13 at 14:13

3

I use a rather strange method, but it works:

$('.click-btn').click(function(){
   $('.modal').show(); //show popup
})

$('body').click(function(){
   $('.modal').hide(); //hide modal
})

$('.click-btn, .modal').click(function(e){
   e.stopPropagation; // don't close modal by clicking inside modal and by clicking btn
})

edited Nov 21 '13 at 14:13

BenMorel

34,448
50
182
322

answered Nov 01 '13 at 14:22

BordiArt

756
8
20

score 0 · Answer 3 · answered Nov 01 '13 at 13:58

0

user event

function addEvent(action) {
    $("body").click(function() { action();});
}

function clearEvent() {
    $("body").off('click');
}

answered Nov 01 '13 at 13:58

Ulrich Horus

352
3
9

score 0 · Answer 4 · answered Nov 01 '13 at 14:29

You want to do this:

$(document).click(function()
{
     popups_close();
})

$('Your selector of the popup').click(function(e)
{
    e.stopPropagation();          
})

.stopPropagation(); Will actually cancel the .click() function that was triggerd by clicking in the document. So whenever you click anywere in the document the popup will close, except when clicked on the popup itself.

Hope this helped!

jsFiddle

score 0 · Answer 5 · answered Nov 01 '13 at 20:23

I think you just want to set overlayClose and possibly escClose to true. Your plugin probably creates an overlay on the page so users can't click anywhere else so I'm guessing overlayClose: true will get the plugin to close the dialog when the overlay is clicked.

    escClose: true,
    overlayClose: true

I'm not sure what plugin you're using, but this one uses a clickClose property.

Close javascript popup by clicking anywhere

5 Answers5