Does jQuery dialog display as hidden by default?
<p>I am using jQuery dialog in a simple, typical use case:</p>

<p>In the Javascript:</p>

<pre><code>$('myDialog').dialog({
    modal: true;
});
</code></pre>

<p>In HTML:</p>

<pre><code>&lt;div id="myDialog" title="Dialog Title"&gt;
    Dialog contents here
&lt;/div&gt;
</code></pre>

<p>However, the CSS I'm using to control the layout &amp; look-and-feel of the <code>myDialog</code> 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.</p>

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

<p>So, this leads me to believe one of two things:</p>

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

<p><strong>Can someone please tell me which of those two assertions are correct?</strong></p>

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

<p>If the latter assertion is correct, then how can I hide the <code>myDialog</code> div on page load?</p>

<p>Thanks in advance!</p>
