When creating a dialog with jquery, how do I hide the dialog div?

jquery css jdialog
stormist picture stormist · Mar 25, 2010 · Viewed 23.6k times · Source

I am creating a dialog like in this page:

http://jqueryui.com/demos/dialog/#modal-confirmation

(click view source)

on the bottom is the div that gets placed in the dialog. The dialog works perfect when called by the javascript but the dialog is apparent at the bottom of the page when it loads. (minus all the styling that gets applied when it is called by the javascript function)

How can I hide the div and still allow the dialog to use it? I have tried setting style="visibility:hidden" but that prevents it from being shown when called by the javascript.

Answer

R0MANARMY picture R0MANARMY · Mar 25, 2010

This may be a stupid question, but instead of "visibility:hidden" have you tried "display:none;"? I had to solve the same problem for a project I'm working on and I'm reasonably sure display:none worked.

You can also use the

$(foo).dialog({ autoOpen: false });

option to "initialize" the dialog (thus hiding it and all that good stuff). The only catch is, you'll probably see the dialog "flicker" as the page loads but before jQuery has a chance to hide it.

Related questions

How do I add a class to a given element?

I have an element that already has a class: <div class="someclass"> <img ... id="image1" name="image1" /> </div> Now I want to create a JavaScript function that will add a class to the div (…

Read More
How can I remove a style added with .css() function?

I'm changing CSS with jQuery and I wish to remove the styling I'm adding based on the input value: if(color != '000000') $("body").css("background-color", color); else // remove style ? How can I do this? Note that the line above …

Read More
Slide right to left?

How can I have a div go from collapsed to expanded (and vice versa), but do so from right to left? Most everything I see out there is always left to right.

Read More