Is there a default option to close a jQuery dialog by clicking somewhere on the screen instead of the close icon?
Solution: use Element. closest() inside a document click event listener. Element. closest() works its way to the top of the root of the DOM object to see if it can find a match for the query selector that was provided.
Definition and UsageThe close() method closes the dialog. Tip: This method is often used together with the show() method.
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; } });
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 love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With