jQuery UI dialog() fadeIn issue

Question

jsFiddle : http://jsfiddle.net/loren_hibbard/ChXbr/

I'm trying to use the jQuery UI dialog box, but cannot figure out how to make it fadeIn when it appears and fadeOut when it is closed.

If I do something like this...

// Dialog           
$('#dialog').dialog({
   autoOpen: false,
   width: 600,
   modal: true,
   show: 'fadeIn(300)'
});

... then the modal sort of slides in with that weird jQuery effect where all the text inside is constantly having its justification and formatting adjusted. I'd like just a normal fade in where the content sort of smoothly materializes ( http://www.bennadel.com/resources/presentations/jquery/demo5/index.htm ).

Also, is there anyway to make the modal overlay a bit darker? And how come when I delete the paragraph of seemingly unrelated text, the modal stops working?

Answer 1

Try this:

$("#dialog").dialog({
    autoOpen: false,
    show: {
        effect: 'fade',
        duration: 2000
    },
    hide: {
        effect: 'fade',
        duration: 1000
    }
});

jsFiddle example of my code, and a jsFiddle using your code. BTW, in your example you have modal set to both true and false.

Answer 2

You could try:

// Dialog           
$('#dialog').dialog({
   autoOpen: false,
   modal: false,
   width: 600,
   modal: true,
   show: function() {$(this).fadeIn(300);}
 });