Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Close dialog on click (anywhere)

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

like image 518
Fuxi Avatar asked Nov 04 '09 19:11

Fuxi


People also ask

How to close popup when click outside javascript?

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.

How do I close a dialog box in HTML?

Definition and UsageThe close() method closes the dialog. Tip: This method is often used together with the show() method.


2 Answers

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;     } }); 
like image 154
Jason Avatar answered Sep 30 '22 07:09

Jason


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();         }); 
like image 35
jgallant Avatar answered Sep 30 '22 07:09

jgallant