I'm using the following code for managing the jQuery UI dialog:

$("#mydialog").dialog({
      autoOpen: false,
      title: "myDialog",
      modal: true,
      width: "800",
      hide: null,
      open: function(event, ui){  
        //some code
    },
     close: function(event, ui){ 
        $("#mydialog").dialog("option", "fade", null);       
    }
});

And then I open the dialog calling this code:

$("#mydialog").dialog("option", {
    modal: true
}).dialog("open");

This works fine, but I can't see any effect when I close the dialog.

How modify my code in order to obtain this result?

I'm using the following code for managing the jQuery UI dialog:

$("#mydialog").dialog({
      autoOpen: false,
      title: "myDialog",
      modal: true,
      width: "800",
      hide: null,
      open: function(event, ui){  
        //some code
    },
     close: function(event, ui){ 
        $("#mydialog").dialog("option", "fade", null);       
    }
});

And then I open the dialog calling this code:

$("#mydialog").dialog("option", {
    modal: true
}).dialog("open");

This works fine, but I can't see any effect when I close the dialog.

How modify my code in order to obtain this result?

• javascript
• jquery
• jquery-ui

• What effect do you want to see? – Evan Davis Commented Sep 25, 2013 at 19:41
• fade effect for example – GVillani82 Commented Sep 25, 2013 at 19:42

2 Answers 2

If i understand correctly you want your dialog to close with a fading effect.

    $("#mydialog").dialog({
    autoOpen: false,
    title: "myDialog",
    modal: true,
    width: "800",
    hide: { effect: "fade", duration: 200 } //put the fade effect
});

The trick here is to have dialog actually close after fading process finishes, not before it.

Try closing dialog using this code, it should do the trick:

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