JQuery dialog momentairly displayed on page load

Question

I created a page that has a JQuery based dialog using the standard JQuery UI function. I do this with out of the box functionality of JQuery... nothing special at all. Here

Answer 1

You can add some CSS so it's by default hidden, no onload code needed:

#myDialog { display: none; }

With this, no other code is necessary, when you open the dialog it'll reverse this style...so nothing additional to run on document.ready. Alternatively, if you have lots of dialogs, give it a class, like this:

With this CSS:

.dialog { display: none; }

In almost all cases, jQuery uses the display style attribute to hide things, so using this to initially hide something will work with whatever you want to use the element for later, whether it's a dialog, a simple .fadeIn(), etc.