css - When creating a dialog with jquery, how do I hide the dialog div?

Question

I am creating a dialog like in this page:

http://jqueryui.com/demos/dialog/#modal-confirmation

(click view source)

on the bottom is the div that gets placed in the dialog. The dialog works perfect when called by the javascript but the dialog is apparent at the bottom of the page when it loads. (minus all the styling that gets applied when it is called by the javascript function)

How can I hide the div and still allow the dialog to use it? I have tried setting style="visibility:hidden" but that prevents it from being shown when called by the javascript.

Answer 1

This may be a stupid question, but instead of "visibility:hidden" have you tried "display:none;"? I had to solve the same problem for a project I'm working on and I'm reasonably sure display:none worked.

You can also use the

$(foo).dialog({ autoOpen: false });

option to "initialize" the dialog (thus hiding it and all that good stuff). The only catch is, you'll probably see the dialog "flicker" as the page loads but before jQuery has a chance to hide it.