简体   繁体   中英

Close javascript popup by clicking anywhere

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();
}   

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

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
})

user event

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

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

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

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.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM