jQuery UI对话框:在外部单击时如何关闭对话框? [英] jQuery UI dialogs: how to close dialog when click outside?

问题描述

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

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: http://jsfiddle.net/jasonday/xpkFf/

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

Non-Modal dialog Method 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;
          }


  });

这篇关于jQuery UI对话框:在外部单击时如何关闭对话框?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！