Dialogs jQuery UI: how to close a dialog when you click on the appearance?

Question

In docs I did not see such information.

In such cases, you can close the dialog:

1) press Esc;

2) click "OK" or "Close" in the dialog box.

But how to close the dialog if you click on it?

Thanks!

Answer 1

Here are 2 more solutions for modeless dialogs:

If the dialog is modeless Method 1: 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'); } } ); 

Modeless 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

I found a solution on ryanjeffords.com :

 <script type="text/javascript"> $(document).ready(function() { $("#dialog").dialog(); $('.ui-widget-overlay').live("click",function(){ $("#dialog").dialog("close"); }); }); </script> 

Answer 3

If the dialog is modal, insert these 3 lines of code into the open function when you create the dialog parameters:

 open: function(event,ui) { $('.ui-widget-overlay').bind('click', function(event,ui) { $('#myModal').dialog('close'); }); } 

Answer 4

Based on the same problem, I created a small plug-in that allows you to close the dialog box when you click outside of it, whether it be a modal or non-modal dialog box. It supports one or more dialogs on one page.

Additional information on my website here: http://www.coheractio.com/blog/closing-jquery-ui-dialog-widget-when-clicking-outside

The plugin is also located on github: https://github.com/coheractio/jQuery-UI-Dialog-ClickOutside

Laurent

Answer 5

This is my decision.

I, for example,

 <div id="dialog1">Some content in here</div> <div id="dialog2">Different content in here</div> <div id="dialog3">And so on...</div> 

Each div opens as a dialog, depending on what the user interacts with. Thus, having the ability to close the current active, I do this.

 // This closes the dialog when the user clicks outside of it. $("body").on('click', '.ui-widget-overlay', function() { if( $("div.ui-dialog").is(":visible") ) { var openDialogId = $(".ui-dialog").find(".ui-dialog-content:visible").attr("id"); if ($("#"+openDialogId).dialog("isOpen")) { $("#"+openDialogId).dialog('close'); } } });