jquery-ui – jQuery UI对话框:如何在外部点击时关闭对话框?

前端之家收集整理的这篇文章主要介绍了jquery-ui – jQuery UI对话框:如何在外部点击时关闭对话框?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
docs我没有看到这样的信息.

在这种情况下,有关闭对话框的选项:

1)推Esc;

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

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

谢谢!

解决方法

以下是非模态对话框的其他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;
          }


  });

猜你在找的jQuery相关文章