点击时closures对话框（任何地方）
有没有一个默认的选项，通过点击屏幕上的某个地方而不是closures图标来closuresjQuery对话框？
编辑：这是我创作的一个插件，它扩展了jQuery UI对话框，以便在外部点击时添加其他function： https ： //github.com/jasonday/jQuery-UI-Dialog-extended
这里有3个方法来closures一个jQuery UI对话框，当点击外面的popin时：
如果对话框是模式/有背景覆盖： http : //jsfiddle.net/jasonday/6FGqN/
jQuery(document).ready(function() { jQuery("#dialog").dialog({ bgiframe: true, autoOpen: false, height: 100, modal: true, open: function() { jQuery('.ui-widget-overlay').bind('click', function() { jQuery('#dialog').dialog('close'); }) } }); }); 如果对话框是非模态的方法1： http : //jsfiddle.net/jasonday/xpkFf/
// Close Pop-in If the user clicks anywhere else on the page jQuery('body') .bind('click', function(e) { if(jQuery('#dialog').dialog('isOpen') && !jQuery(e.target).is('.ui-dialog, a') && !jQuery(e.target).closest('.ui-dialog').length ) { jQuery('#dialog').dialog('close'); } });
非模态对话方法2： http : //jsfiddle.net/jasonday/eccKr/
$(function() { $('#dialog').dialog({ autoOpen: false, minHeight: 100, width: 342, draggable: true, resizable: false, modal: false, closeText: 'Close', open: function() { closedialog = 1; $(document).bind('click', overlayclickclose); }, focus: function() { closedialog = 0; }, close: function() { $(document).unbind('click'); } }); $('#linkID').click(function() { $('#dialog').dialog('open'); closedialog = 0; }); var closedialog; function overlayclickclose() { if (closedialog) { $('#dialog').dialog('close'); } //set to one because click on dialog box sets to zero closedialog = 1; } });
当创build一个JQuery对话窗口时，JQuery插入一个ui-widget-overlay类。 如果将一个点击函数绑定到该类来closures对话框，它应该提供您正在查找的function。
代码将是这样的（未经testing）：
$('.ui-widget-overlay').click(function() { $("#dialog").dialog("close"); });
编辑：以下已经为剑道进行了testing：
$('.k-overlay').click(function () { var popup = $("#dialogId").data("kendoWindow"); if (popup) popup.close(); });
如果您有多个可以在页面上打开的对话框，则可以通过单击背景来closures其中的任何对话框：
$('body').on('click','.ui-widget-overlay', function() { $('.ui-dialog').filter(function () { return $(this).css("display") === "block"; }).find('.ui-dialog-content').dialog('close'); });
（只适用于模式对话框，因为它依赖于'.ui-widget-overlay'，而且它会在任何时候点击其中一个背景的时候closures所有打开的对话框。
如果你想在整个网站的所有对话框中执行下面的代码…
$.extend( $.ui.dialog.prototype.options, { open: function() { var dialog = this; $('.ui-widget-overlay').bind('click', function() { $(dialog).dialog('close'); }); } });
这篇文章可能有帮助：
http://www.jensbits.com/2010/06/16/jquery-modal-dialog-close-on-overlay-click/
另请参见如何通过单击框所覆盖的区域外部来closuresjQuery UI模式对话框？ 了解何时以及如何应用overlay点击或直播活动，具体取决于您在页面上使用对话的方式。
在某些情况下，杰森的答案是矫枉过正的。 和$('.ui-widget-overlay').click(function(){ $("#dialog").dialog("close"); }); 并不总是与dynamic内容一起工作。
我find的解决scheme在所有情况下都是：
$('body').on('click','.ui-widget-overlay',function(){ $('#dialog').dialog('close'); });
如果以前的post的代码不起作用，请尝试一下：
$("a.ui-dialog-titlebar-close")[0].click();
面对同样的问题，我创build了一个小插件，可以在单击外部时closures对话框，无论是模态还是非modal dialog。 它支持在同一页面上的一个或多个对话框。
更多信息在我的网站上： http : //www.coheractio.com/blog/closing-jquery-ui-dialog-widget-when-clicking-outside
洛朗
尝试这个：
$(".ui-widget-overlay").click(function () { $(".ui-icon.ui-icon-closethick").trigger("click"); });
有点晚了，但这是一个解决scheme，为我工作。 完美的，如果你的模式是在叠加标签。 所以，当你点击模态内容以外的任何地方时，模态会closures。
HTML
<div class="modal"> <div class="overlay"> <div class="modal-content"> <p>HELLO WORLD!</p> </div> </div> </div>
JS
$(document).on("click", function(event) { if ($(event.target).has(".modal-content").length) { $(".modal").hide(); } });
这是一个工作的例子
