jQuery UI 1.7.1 模式关闭覆盖点击
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1092940/
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
jQuery UI 1.7.1 Modal Close on Overlay Click
提问by mattmac
I'm trying to override the default behavior of a jQuery UI modal dialog box to close the box when the overlay is clicked. The code I have below will close the dialog box after I open it for the first time and click on the overlay. When I open the dialog box again, clicking on the overlay does nothing. I am missing an event here. Can someone point out what I'm doing wrong here?
我正在尝试覆盖 jQuery UI 模式对话框的默认行为以在单击叠加层时关闭该框。我下面的代码将在我第一次打开对话框并单击叠加层后关闭对话框。当我再次打开对话框时，单击叠加层没有任何作用。我在这里错过了一个活动。有人可以指出我在这里做错了什么吗？
Thanks!
谢谢！
$(function(){
$('#production_schedule_dialog').dialog({
autoOpen: false,
width: 570,
modal: true,
closeOnEscape: true
});
$('#production_schedule_dialog_link').click(function(){
$('#production_schedule_dialog').dialog('open');
return false;
});
$(document).bind('click', dialogBlur);
});
var dialogBlur = function(event){
var target = $(event.target);
if (target.is('.ui-dialog') || target.parents('.ui-dialog').length) {
return;
}
$('.ui-dialog:visible').find('.ui-dialog-titlebar-close').trigger('click');
$(document).unbind('click', dialogBlur);
}
回答by Paul
Easiest way to do it: http://www.ryanjeffords.com/blog/entry/closing-a-jquery-ui-dialog-when-the-dialog-loses-focus
最简单的方法：http: //www.ryanjeffords.com/blog/entry/closure-a-jquery-ui-dialog-when-the-dialog-loses-focus
Add this:
添加这个：
$('.ui-widget-overlay').live("click", function() {
//Close the dialog
$("#dialog").dialog("close");
});
回答by Evan Carroll
Paul's solution works fine if you're using an old version of jQuery (pre-1.7). Now .live()is deprecated though. Try using on()instead.
如果您使用的是旧版本的 jQuery（1.7 之前），Paul 的解决方案可以正常工作。.live()虽然现在已弃用。尝试使用on()。
$('.ui-widget-overlay').on("click", function() {
//Close the dialog
$(this).find(".dialog").dialog("close");
});
回答by Michael Scepaniak
I'm not sure why your code isn't working, but I took it, modified it, and got a version that seems to work as both you and I want:
我不确定为什么你的代码不起作用，但我接受了它，修改了它，并得到了一个似乎可以像你和我想要的那样工作的版本：
var openDialogWindow = function(dialogId)
{
$(dialogId).dialog('open');
$(".ui-widget-overlay").bind("click", closeDialogWindowOnOverlayClick);
}
var closeDialogWindowOnOverlayClick = function(event){
var closeButton = $(".ui-dialog:visible").find(".ui-dialog-titlebar-close");
closeButton.trigger("click");
$(".ui-widget-overlay").unbind("click", closeDialogWindowOnOverlayClick);
}
The major difference here is that I'm binding dialog-closing logic to clicks on JQuery's overlay object (instead of the document, as you are). And I do the binding when the dialog opens and unbinding it when the dialog closes. Not truly necessary, but it keeps things clean.
这里的主要区别在于，我将对话框关闭逻辑绑定到对 JQuery 覆盖对象（而不是文档）的点击。我在对话框打开时进行绑定，并在对话框关闭时解除绑定。不是真正必要的，但它可以保持清洁。
Regardless, thanks for the inspiration.
不管怎样，谢谢你的灵感。
回答by Jonathan
Best way to do it :
最好的方法：
$('body').on("click", ".ui-widget-overlay", function() {
$("#dialog").dialog("close");
});
回答by user2749416
If page contains few dialogs, you can use this universal method:
如果页面包含的对话框很少，您可以使用这种通用方法：
$(document).on('click', '.ui-widget-overlay', function() {
var $dialog = $(this).siblings('.ui-dialog:visible')
.find('.ui-dialog-content');
if ($dialog.length && $dialog.dialog('isOpen')) {
$dialog.dialog('close');
}
});
回答by daniellmb
looking at your example it looks like you are unbinding the event and not setting it back up.
查看您的示例，您似乎正在解除绑定事件而不是将其设置备份。
try moving your bind call:
尝试移动您的绑定调用：
$('#production_schedule_dialog_link').click(function(){
$('#production_schedule_dialog').dialog('open');
$(document).bind('click', dialogBlur);
return false;
});
that should rebind your blur listener each time your dialog is opened.
每次打开对话框时都应该重新绑定您的模糊侦听器。
回答by jk.
回答by Kevin Miller
So many complicated answers... here is a simple reusable one.
这么多复杂的答案……这是一个简单的可重复使用的答案。
$('.ui-widget-overlay').live('click', function(event)
{
$(this).prev().find('div:nth-child(2)').dialog('close');
});
