通过单击任意位置关闭 javascript 弹出窗口答案

【问题标题】：Close javascript popup by clicking anywhere通过单击任意位置关闭 javascript 弹出窗口
【发布时间】：2013-11-01 13:48:37
【问题描述】：

我是超级新手，需要快速建议。我在我的 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();
}

【问题讨论】：

注意，这是javascript，而不是java。它们是非常不同的东西。我已经为你编辑了你的问题。
好的，谢谢你的帮助：)
使用 CSS 关闭弹出窗口？
jQuery click off element event的可能重复

标签： javascript jquery wordpress

【解决方案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/

*检查 cmets 以获取 @ComFreek 的一些优雅修订

【讨论】：

如果点击对话框，这不也关闭对话框吗？
我认为这是故意的，因为问题没有另外说明。我将添加一个解决方法。
你的第二个例子不起作用，因为$(document).not('#popup').length == 0 (jsFiddle)。
感谢@ComFreek，修复。
很抱歉再次打扰您，但您的解决方案仍然存在问题。测试用例：jsfiddle.net/wnT4G/4（点击<span>blub</span>）。 Here is a fix，但我认为使用事件冒泡会更优雅：jsfiddle.net/wnT4G/2

【解决方案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
})

【讨论】：

【解决方案3】：

用户事件

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

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

【讨论】：

【解决方案4】：

你想这样做：

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

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

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

希望这有帮助！

jsFiddle

【讨论】：

【解决方案5】：

我认为您只想将 overlayClose 和可能的 escClose 设置为 true。您的插件可能会在页面上创建一个叠加层，因此用户无法单击其他任何位置，所以我猜overlayClose: true 将使插件在单击叠加层时关闭对话框。

    escClose: true,
    overlayClose: true

我不确定您使用的是什么插件，但 this one 使用 clickClose 属性。

【讨论】：