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

Keith Ratner所说的here解决方案效果很好。

在指定对话框时，添加一个独特的类来标识您希望在外部点击时可以关闭的所有对话框：

dialogClass: "clickoncloseoutside",

将行为添加到整个页面，以便在单击正文中的任何位置时关闭所有打开的对话框：

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

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

2 个答案: