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

这是一个工作的例子