点击任何位置关闭JavaScript弹窗

Question

我是一个超级新手，需要快速建议。我在我的WordPress网站上安装了一个基于JavaScript的弹出插件，当有人访问该网站时，它会自动打开。为了关闭弹出窗口，用户将不得不点击弹出窗口角落的 X 。

我需要编辑插件，以便用户可以在任何地方单击，插件将关闭。

这里是我找到的JavaScript代码。对此有什么提示吗？

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

- Tormod Ndsn

---

注意，这是 javascript，不是 java。它们是非常不同的东西。我已经为您编辑了问题。 - Rory McCrossan

啊好的，谢谢帮忙 :) - Tormod Ndsn

使用CSS关闭弹出窗口？ - putvande

可能是 jQuery 点击元素外事件 的重复问题。 - André Dion

Answer 1

像这样应该就可以了：

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

如果您希望在与弹出窗口本身交互时保持模态激活：

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

这里有一个简单的例子：http://jsfiddle.net/wnT4G/。请查看@ComFreek的评论，以获取一些优雅的修改建议。

- Stuart Kershaw

---

如果有人点击对话框，这也会关闭对话框吗？ - ComFreek

我认为这是有意为之的，因为问题没有表明相反的意思。我会添加一个解决方法。 - Stuart Kershaw

你的第二个例子不会起作用，因为 $(document).not('#popup').length == 0 (jsFiddle)。 - ComFreek

感谢@ComFreek，已修复。 - Stuart Kershaw

抱歉再次打扰您，但是您的解决方案仍然有漏洞。 测试用例：http://jsfiddle.net/wnT4G/4/（单击<span>blub</span>）。 [这里有一个修复程序]（http://jsfiddle.net/wnT4G/3/），但是在我看来，使用事件冒泡会更加优雅：http://jsfiddle.net/wnT4G/2/。 - ComFreek

做得好，@ComFreek。同意你的事件冒泡示例是更优雅的解决方案。 - Stuart Kershaw

Answer 2

我使用了一种比较奇怪的方法，但它很有效：

$('.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
})

- BordiArt

Answer 3

用户事件

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

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

- Ulrich Horus

Answer 4

你想要做这个：

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

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

.stopPropagation();实际上会取消由单击文档触发的.click()函数。因此，无论您在文档中的任何位置单击，弹出窗口都将关闭，除非单击弹出窗口本身。

希望这可以帮助您！

jsFiddle

- nkmol

Answer 5

我认为你只需要将overlayClose和可能的escClose设置为true。你的插件可能会在页面上创建一个覆盖层，以便用户无法单击其他任何地方，因此我猜测overlayClose: true将使插件在单击覆盖层时关闭对话框。

    escClose: true,
    overlayClose: true

我不确定你在使用什么插件，但 这个 使用了一个 clickClose 属性。

- Jason Goemaat