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?
+6
A:
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
Doug Neiner
2010-01-13 05:30:41
Wow, that worked beautifully. Why doesn't this cause the contents of the dialog box to be hidden when it pops up?
Brian
2010-01-13 05:33:25
Because that's all jQuery is doing to show or hide it... it's just toggling the display style.
Michael Bray
2010-01-13 05:34:29
Your `div` actually gets nested into the markup for the `ui` dialog. It would remain hidden except that during setup, the `ui` library calls `.show()` on the div which overrides the CSS. It is on line 71 of `ui.dialog.js` in the uncompressed source if you are interested :)
Doug Neiner
2010-01-13 05:40:49
@Brian: jQuery adds an inline style to the box. Inline styles have precedence over all other styles (except for `!important` declarations).
Brian McKenna
2010-01-13 05:41:24
A:
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.
Michael Bray
2010-01-13 05:31:18