单击关闭对话框(任何位置)

Question

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

Answer 1

编辑:这是我创作的一个插件,它扩展了jQuery UI对话框,包括单击外部时关闭以及其他功能:https: //github.com/jasonday/jQuery-UI-Dialog-extended

以下是在单击外部popin时关闭jquery UI对话框的3种方法:

如果对话框是模态/具有背景叠加: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');
            })
        }
    });
}); 

如果对话框是非模态的方法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

在创建JQuery Dialog窗口时,JQuery会插入一个ui-widget-overlay类.如果将click函数绑定到该类以关闭对话框,它应该提供您要查找的功能.

代码将是这样的(未经测试):

$('.ui-widget-overlay').click(function() { $("#dialog").dialog("close"); });

编辑: 以下内容也已经过针对剑道的测试:

$('.k-overlay').click(function () {
            var popup = $("#dialogId").data("kendoWindow");
            if (popup)
                popup.close();
        });

Answer 3

如果您有几个可以在页面上打开的对话框,这将允许通过单击背景关闭它们中的任何一个:

$('body').on('click','.ui-widget-overlay', function() {
    $('.ui-dialog').filter(function () {
    return $(this).css("display") === "block";
    }).find('.ui-dialog-content').dialog('close');
});

(仅适用于模态对话框,因为它依赖于'.ui-widget-overlay'.并且只要单击其中一个的背景,它就会关闭所有打开的对话框.)

Answer 4

如果您想对整个站点中的所有对话框执行此操作,请尝试以下代码...

$.extend( $.ui.dialog.prototype.options, { 
    open: function() {
        var dialog = this;
        $('.ui-widget-overlay').bind('click', function() {
            $(dialog).dialog('close');
        });
    }   

});

Answer 5

这篇文章可能有所帮助

http://www.jensbits.com/2010/06/16/jquery-modal-dialog-close-on-overlay-click/

另请参阅如何通过单击框所覆盖的区域外部来关闭jQuery UI模式对话框？用于解释何时以及如何应用overlay单击或直播事件,具体取决于您在页面上使用对话框的方式.

Answer 6

在某些情况下,杰森的回答是矫枉过正的.而且$('.ui-widget-overlay').click(function(){ $("#dialog").dialog("close"); });并不总是与动态内容合作.

我发现适用于所有情况的解决方案是:

$('body').on('click','.ui-widget-overlay',function(){ $('#dialog').dialog('close'); });