JQuery Dialog Box - Doesn't Fade Until Closed

Question

I have a div (box) on my page and I use this script to display the div as a dialog box. Inside this div, I have a hyperlink. When I click the hyperlink, I want to disappear from the dialog box and close. The contents of the dialog box disappear, but the border of the dialog box remains the same. If I add the $ ("# box") dialog box. ("Close") in the click function after fadeto, the effect will not. It just closes the dialog completely. Any help? using jquery-ui-1.7.2

<script type="text/javascript"> $(document).ready(function(){ $("a#later").click(function () { $("#box").fadeTo('slow', 0); }) }); $(function () { $("#box").dialog({ autoOpen: true, width: 500, modal: true, }); }); </script> 

Answer 1

What about

 $("#box").fadeTo('slow', 0, function() { $("#box").dialog('close'); }); 

You want proximity to happen after the attenuation is complete, right?

Answer 2

try this, it might work:

 $("a#later").click(function () { $("#box").fadeTo('slow', function() { $("#box").dialog("close") }); }); 

Answer 3

I will try Richard code below and it works. You can specify the effect name as a string:

 $("#dialog").dialog({ hide: "fadeOut" }); 

or you can provide a hash if you have additional parameters, for example:

 $("#dialog").dialog({ hide: {effect: "fadeOut", duration: 5000} }); 

Answer 4

Try the following:

  $(function () { $("#box").dialog({ autoOpen: true, width: 500, modal: true, show: 'blind', hide: 'fade' }); }); 

See an example here: Animated Dialog

Answer 5

this is my code:

 $(function() { $( "a#link-id" ).click(function(){$(".ui-dialog").fadeOut(2000)})}); 

script works :). You do not need to click the close button.