单击任意位置关闭 javascript 弹出窗口
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19728066/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Close javascript popup by clicking anywhere
提问by Tormod Ndsn
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.
我是超级新手，需要快速建议。我在我的 wordpress 网站上安装了一个基于 javascript 的弹出插件，当有人访问该网站时，女巫会自动打开。要关闭弹出窗口，用户必须单击弹出窗口角落的十字 X。
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?
这是我找到的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();
}
回答by Stuart Kershaw
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/
这里有一个简单的例子：http: //jsfiddle.net/wnT4G/
*Check comments for some elegant revisions by @ComFreek
*检查@ComFreek 的一些优雅修订的评论
回答by BordiArt
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
})
回答by nkmol
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.
.stopPropagation();实际上会取消.click()在文档中点击触发的功能。因此，无论何时单击文档中的任何位置，弹出窗口都会关闭，除非单击弹出窗口本身。
Hope this helped!
希望这有帮助！
回答by Jason Goemaat
I think you just want to set overlayCloseand possibly escCloseto true. Your plugin probably creates an overlay on the page so users can't click anywhere else so I'm guessing overlayClose: truewill get the plugin to close the dialog when the overlay is clicked.
我认为您只想设置overlayClose并可能设置escClose为 true。您的插件可能会在页面上创建一个叠加层，因此用户无法单击其他任何地方，因此我猜overlayClose: true当单击叠加层时，插件会关闭对话框。
escClose: true,
overlayClose: true
I'm not sure what plugin you're using, but this oneuses a clickCloseproperty.
我不确定你使用的是什么插件，但这个插件使用了一个clickClose属性。
回答by Ulrich Horus
user event
用户事件
function addEvent(action) {
$("body").click(function() { action();});
}
function clearEvent() {
$("body").off('click');
}
