4

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();
}   
3
  • Note, this is javascript, not java. They are very different things. I've edited your question for you. Commented Nov 1, 2013 at 13:49
  • 1
    Use CSS to close a popup?
    – putvande
    Commented Nov 1, 2013 at 13:53
  • possible duplicate of jQuery click off element event Commented Nov 1, 2013 at 13:58

5 Answers 5

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

5
  • Doesn't this also close the dialog if one clicks on the dialog?
    – ComFreek
    Commented Nov 1, 2013 at 13:56
  • I assumed that was intended as the question doesn't indicate otherwise. I'll add a workaround. Commented Nov 1, 2013 at 13:56
  • 1
    Your second example won't work because $(document).not('#popup').length == 0 (jsFiddle).
    – ComFreek
    Commented Nov 1, 2013 at 14:21
  • 1
    I'm sorry to bother you again, but your solution is still buggy. Test case: jsfiddle.net/wnT4G/4 (click on <span>blub</span>). Here is a fix, but using event bubbling would be more elegant in my opinion: jsfiddle.net/wnT4G/2
    – ComFreek
    Commented Nov 1, 2013 at 14:43
  • Nice work @ComFreek, agreed. Your event bubbling example is the more elegant solution here. Commented Nov 1, 2013 at 14:50
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
})
0
0

user event

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

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

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

0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.