当外部点击时关闭Jquery模式对话框

Question

我的模态jquery框可以正常工作，但是我怎样才能将选项添加到 关闭弹出框，当我点击框外？

这里是我的代码：

<script>  
      $(function() { 
      $("#dialog").dialog({ 
       width: 900, 
       height: 600, 

       show: { 
       effect: "blind", 
       duration: 1000 
       }, 

       hide: { 
       effect: "explode", 
       duration: 1200 
       }, 

       open: function(event, ui){ 
       //setTimeout("$('#dialog').dialog('close')",10000); 
       $('.ui-widget-overlay').live('click', function() { 
        $('#dialog').dialog("close"); 
       }); 
       } 

      }); 
      }); 
     </script> 

更新

感谢您的帮助，但它不工作，我说你的想法是这样的：

<script>  
     $(function() { 
     $("#dialog").dialog({ 
      width: 900, 
      height: 600, 

      show: { 
      effect: "blind", 
      duration: 200 
      }, 

      hide: { 
      effect: "explode", 
      duration: 1300 
      }, 

      open: function(event, ui){ 
      //setTimeout("$('#dialog').dialog('close')",10000); 
      $('.ui-widget-overlay').live('click', function() { 
       $('#dialog').dialog("close"); 
      }); 

      $("#dialog").bind('clickoutside',function(){ 
       $("#dialog").dialog('close'); 
      }); 

      } 


     }); 
     }); 
    </script> 

Answer 1

试试这个！

$("#dialog").bind('clickoutside',function(){ 
    $("#dialog").dialog('close'); 
}); 

Answer 2

基思拉特纳的解决方案描述here运作良好。

当指定对话（S），添加一个独特的类，以确定所有要上的点击以外关闭的对话框：

dialogClass: "clickoncloseoutside", 

行为添加到整个页面关闭所有打开的对话框当点击在身体的任何地方：

$("body").on("click", "div.ui-widget-overlay:visible", function() { 
    $(".ui-dialog.clickoncloseoutside:visible") 
     .find(".ui-dialog-content") 
     .dialog("close"); 
});