jQuery UI对话框：如何在外部点击时关闭对话框？

In docs I didn't see such information.

在文档中，我没有看到这样的信息。

There are options to close dialog in such cases:

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

1) push Esc;

1）推Esc;

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

2）单击对话框中的“确定”或“关闭”按钮。

But how to close dialog if click outside?

但如果点击外面如何关闭对话框？

Thanks!

谢谢！

5 个解决方案

#1

Here are 2 other solutions for non-modal dialogs:

以下是非模态对话框的其他2个解决方案：

If dialog is non-modal Method 1: method 1: http://jsfiddle.net/jasonday/xpkFf/

如果对话框是非模态的方法1：方法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');
                        }
                       }
                      );

Non-Modal dialog Method 2: http://jsfiddle.net/jasonday/eccKr/

非模态对话框方法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;
          }


  });

#2

I found solution on ryanjeffords.com:

我在ryanjeffords.com上找到了解决方案：

<script type="text/javascript">

    $(document).ready(function() {

        $("#dialog").dialog();

        $('.ui-widget-overlay').live("click",function(){
            $("#dialog").dialog("close");
        });    
    });   
</script>

#3

If dialog is modal, then paste these 3 lines of code in the open function when you create your dialog options:

如果dialog是模态的，那么在创建对话框选项时，在open函数中粘贴这3行代码：

open: function(event,ui) {
    $('.ui-widget-overlay').bind('click', function(event,ui) {         
        $('#myModal').dialog('close');
    });
}

#4

Facing the same problem, I have created a small plugin that enables to close a dialog when clicking outside of it whether it a modal or non-modal dialog. It supports one or multiple dialogs on the same page.

面对同样的问题，我创建了一个小插件，无论是模态对话还是非模态对话，都可以在单击外部时关闭对话框。它支持同一页面上的一个或多个对话框。

More information on my website here: http://www.coheractio.com/blog/closing-jquery-ui-dialog-widget-when-clicking-outside

有关我网站的更多信息，请访问：http：//www.coheractio.com/blog/closing-jquery-ui-dialog-widget-when-clicking-outside

The plugin is also on github: https://github.com/coheractio/jQuery-UI-Dialog-ClickOutside

该插件也在github上：https：//github.com/coheractio/jQuery-UI-Dialog-ClickOutside

Laurent

洛朗

#5

This is my solution.

这是我的解决方案。

I have, for example

我有，例如

<div id="dialog1">Some content in here</div>
<div id="dialog2">Different content in here</div>
<div id="dialog3">And so on...</div>

Each div gets opened as a dialog depending on what the user interacts with. So being able to close the currently active one, I do this.

根据用户与之交互的内容，每个div都会作为对话框打开。因此能够关闭当前活动的那个，我这样做。

// This closes the dialog when the user clicks outside of it.
$("body").on('click', '.ui-widget-overlay', function() {
    if( $("div.ui-dialog").is(":visible") )
    {
        var openDialogId = $(".ui-dialog").find(".ui-dialog-content:visible").attr("id");
        if ($("#"+openDialogId).dialog("isOpen"))
        {
            $("#"+openDialogId).dialog('close');
        }
    }        
});

#1