Jquery 1.4.2 - jquery UI dialog box, closing when externally clicked (not modal)

Question

Using the user interface dialog box. jquery 1.4.2

I have my code to close a dialog when I click on it. This does not work for me. However, if I use the local development version, it works fine. The problem is that I cannot run the jquery version for this part of the site.

Thoughts on how to achieve a click outside the modeless dialogue to close?

// Close Pop-in If the user clicks anywhere else on the page jQuery('body') .bind( 'click', function(e){ if( jQuery('.detailsPopup').dialog('isOpen') && !jQuery(e.target).is('.ui-dialog, a') && !jQuery(e.target).closest('.ui-dialog').length ){ jQuery('.detailsPopup').dialog('close'); } } ); 

Answer 1

You can try the following:

http://jsfiddle.net/GKfZM/117/

It works 1.4.4, but try. Works for autoOpen true or false.

 $('#open').click(function() { $('#your-dialog-id').dialog('open'); closedialog = 0; }); var closedialog; function overlayclickclose() { if (closedialog) { $('#your-dialog-id').dialog('close'); } //set to one because click on dialog (focus) box sets to zero closedialog = 1; } $('#your-dialog-id').dialog({ autoOpen: false, open: function() { closedialog = 1; $(document).bind('click', overlayclickclose); }, focus: function() { closedialog = 0; }, close: function() { $(document).unbind('click'); }, buttons: { Submit: function() { $(this).dialog('close'); } } }); 

Answer 2

 $(document).click(function(e) { if (e.target.classList.contains('ui-widget-overlay')) { $( "#yourDialogId" ).dialog("close"); } });