Close dialog on click (anywhere)

Question

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

Answer 1

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

Answer 2

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