Question

I am using jQuery dialog in a simple, typical use case:

In the Javascript:

$('myDialog').dialog({
    modal: true;
});

In HTML:

<div id="myDialog" title="Dialog Title">
    Dialog contents here
</div>

However, the CSS I’m using to control the layout & look-and-feel of the myDialog div is hosted on a server that my local machine doesn’t have access to (don’t ask why). Ergo, in Firebug, I see a network 404 error of file not found for the CSS file.

When I test this dialog out locally, it displays perfectly fine. However I just noticed that the contents of the myDialog div are actually displayed on my HTML page prior to when the code that executes the dialog’s invocation is triggered.

So, this leads me to believe one of two things:

• A jQuery dialog’s respective <div> element is invisible/hidden by default; however this weird situation where the browser can’t find the CSS file is causing the <div> to display to the user before the dialog even pops up on screen; or
• A jQuery dialog’s respective <div> element is visible by default, and that I must take action to hide it on page load

Can someone please tell me which of those two assertions are correct?

If the former assertion is correct, then the problem should resolve itself when we push the code to our dev environment (which does have access to the CSS file).

If the latter assertion is correct, then how can I hide the myDialog div on page load?

Thanks in advance!

Answer 1

The second is more or less correct. When the page loads the <div> is visible because by default all <div>s in HTML are visible. jQuery only comes along for the ride later.

You should simply make the <div> hidden by default, and let .dialog decide when to show it, for example:

CSS:

.hidden { display: none }

HTML:

<div id="myDialog" class="hidden" title="Dialog Title">
    Dialog contents here
</div>

If you don’t do this then things would deteriorate from “undesirable” to “unacceptable” if the dialog was not supposed to open immediately on page load. See an example.