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

Question

在docs我没有看到这样的信息。

在这种情况下可以选择关闭对话框：

1）push Esc;

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

但如何在外部点击时关闭对话框？

谢谢！

Answer 1

下面是用于非模态对话框2级其他的解决方案：

如果对话框是无模式方法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'); 
         } 
         } 
        ); 

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


    }); 

Answer 2

我发现溶液上ryanjeffords.com：

<script type="text/javascript"> 

    $(document).ready(function() { 

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

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

Answer 3

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

在这里我的网站的更多信息：http://www.coheractio.com/blog/closing-jquery-ui-dialog-widget-when-clicking-outside

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

洛朗

Answer 4

这是我的解决方案。

我有，例如

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

每个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'); 
     } 
    }   
}); 

Answer 5

如果对话框是模式的，然后贴上这3行代码在open功能，当您创建您的对话框选项：

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