点击关闭对话框（任意位置） [英] Close dialog on click (anywhere)

问题描述

解决方案

是否有一个默认选项通过点击屏幕上某处而不是关闭图标来关闭jQuery对话框？

编辑：这是一个我创作的插件，它扩展了jQuery UI对话框，以便在点击外部加上其他功能时包含
关闭：
https://github.com/jasonday/jQuery-UI-Dialog-extended

这里有3种方法来关闭jquery UI对话框，点击外面的popin：

如果对话框是模态的/有背景叠加：
http://jsfiddle.net/jasonday/6FGqN/

  jQuery（document）.ready（function（）{
 jQuery（＃dialog）。dialog（{
 bgiframe ：true，
 autoOpen：false，
 height：100，
 modal：true，
 open：function（）{
 jQuery（'。ui-widget-overlay'）。bind（'click'，function（）{
 jQuery（'＃dialog'）。 
}）
} 
}）; 
}）; 
  

如果对话框是非模态方法1：
http://jsfiddle.net/jasonday/xpkFf/

  //关闭Pop-in如果用户点击页面上的其他任何地方
 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'）。对话框（'close'）; 
 } 
}）; 
  

非模态对话框方法2：
http://jsfiddle.net/jasonday/eccKr/

  $（function（）{
 $（'＃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'）。对话框（'open'）; 
 closedialog = 0; 
}）; 
 
 var closedialog; 
 
 function overlayclickclose（）{
 if（c losedialog）{
 $（'＃dialog'）。对话框（'close'）; 
} 
 //设置为1，因为单击对话框设置为零
 closedialog = 1; 
} 
}）; 
  

Is there a default option to close a jQuery dialog by clicking somewhere on the screen instead of the close icon?

解决方案

Edit: Here's a plugin I authored that extends the jQuery UI Dialog to include closing when clicking outside plus other features: https://github.com/jasonday/jQuery-UI-Dialog-extended

Here are 3 methods to close a jquery UI dialog when clicking outside popin:

If the dialog is modal/has background overlay: http://jsfiddle.net/jasonday/6FGqN/

jQuery(document).ready(function() {
    jQuery("#dialog").dialog({
        bgiframe: true,
        autoOpen: false,
        height: 100,
        modal: true,
        open: function() {
            jQuery('.ui-widget-overlay').bind('click', function() {
                jQuery('#dialog').dialog('close');
            })
        }
    });
}); 

If dialog is non-modal Method 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/

$(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;
    }
});

这篇关于点击关闭对话框（任意位置）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！