Close dialog on click (anywhere)

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

When creating a JQuery Dialog window, JQuery inserts a ui-widget-overlay class. If you bind a click function to that class to close the dialog, it should provide the functionality you are looking for.

Code will be something like this (untested):

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

Edit:The following has been tested for Kendo as well:

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

If you have several dialogs that could be opened on a page, this will allow any of them to be closed by clicking on the background:

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

(Only works for modal dialogs, as it relies on '.ui-widget-overlay'. And it does close all open dialogs any time the background of one of them is clicked.)