jQuery UI对话框:在外部单击时如何关闭对话框?

本文介绍了jQuery UI对话框:在外部单击时如何关闭对话框?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

在文档中，我没有看到此类信息.

In docs I didn't see such information.

在这种情况下，有一些关闭对话框的选项:

There are options to close dialog in such cases:

1)按下Esc;

2)单击对话框中的确定"或关闭"按钮.

2) click on "OK" or "Close" buttons in the dialog.

但是如果在外部单击，如何关闭对话框?

But how to close dialog if click outside?

谢谢！

推荐答案

以下是非模式对话框的其他2种解决方案:

Here are 2 other solutions for non-modal dialogs:

如果对话框为非模态方法1: 方法1: jsfiddle/jasonday/xpkFf/

If dialog is non-modal Method 1: method 1: jsfiddle/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: jsfiddle/jasonday/eccKr/

Non-Modal dialog Method 2: jsfiddle/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; } });