单击时关闭对话框(任何地方) [英] Close dialog on click (anywhere)

问题描述

是否有通过单击屏幕上的某处而不是关闭图标来关闭 jQuery 对话框的默认选项?

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

推荐答案

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

这里有 3 种方法可以在单击弹出框外时关闭 jquery UI 对话框:

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

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

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');
            })
        }
    });
}); 

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

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');
        }
    });

非模态对话框方法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屋！