Geek Answers Handbook

JQuery UI modal dialog overlay disappears

Can I apply a fade effect to the overlay window of a jQuery modal dialog box? The problem is that the overlay div is destroyed when the modal dialog box closes, preventing any animation. This is the code that I have that will work if the overlay div is not destroyed when closing.

$("#edit-dialog-box").dialog( { autoOpen: false, modal: true, width: "30em", show: "fade", hide: "fade", open: function() { $(".ui-widget-overlay").hide().fadeIn(); }, close: function() { $(".ui-widget-overlay").fadeOut(); } });
+4
source share
2 answers

Demo: http://jsfiddle.net/276Ft/2/

 $('#dialog').dialog({ autoOpen: true, modal: true, width: '100px', height: '100px', show: 'fade', hide: 'fade', open: function () { $('.ui-widget-overlay', this).hide().fadeIn(); $('.ui-icon-closethick').bind('click.close', function () { $('.ui-widget-overlay').fadeOut(function () { $('.ui-icon-closethick').unbind('click.close'); $('.ui-icon-closethick').trigger('click'); }); return false; }); } });

+7
source

I advise you not to associate FadeOut overlay with a closed private event.
This solution will work in all cases, for example, if you use the "Cancel" button, or if the dialog closes after doing something else due to other buttons:

 $('#dialog').dialog({ autoOpen: true, modal: true, width: '100px', height: '100px', show: 'fade', hide: 'fade', open: function () { $('.ui-widget-overlay', this).hide().fadeIn(); }, beforeClose: function(event, ui){ // Wait for the overlay to be faded out to try to close it again if($('.ui-widget-overlay').is(":visible")){ $('.ui-widget-overlay').fadeOut(function(){ $('.ui-widget-overlay').hide(); $('.ui-icon-closethick').trigger('click'); }); return false; // Avoid closing } } });
+1
source

More articles:


All Articles