jQuery UI dialog box appears at top of page while page is loading

Question

I have a jQuery dialog box on my website. I give a div on the page the "dialog" id it's contents become the contents of the dialog box. However, when the page is loading, this div appears at the top of the page and looks bad. Does anyone know how to deal with this?

Answer 1

Just hide your div via your CSS file:

#dialog {display: none}

This will not affect its actual display when the dialog is opened.

I tested to be sure, and this method worked with jQuery UI 1.7.2

Answer 2

Assuming that the dialog is changing the 'display' style [eg using .show() and .hide()] then all jQueryUI is doing is setting the display style. thus, you can set the div with the display:none by default, and that way it won't show when you load.