Jquery UI dialog box.. dialog box content loading on main page

Question

I am activating a dialog box like so:

   $('a#addNew').click(function(){
   $('#popup').dialog({
       minWidth:  700,
       title:     'Select a product item'
   });
});

<div id="popup" style="color:#fff; background:#000; width:650px;">
    blah blah blah blah
</div>

thats all well and good.. but the dialog box (#popup) is actually showing up on my page until i click #addNew, in which case it disappears and transfers to the actual dialog box. I only want the user to see that information when they click on #addNew. I dont want it to be sitting on the page. What am i doing wrong here?

Keith.Abramo · Accepted Answer · 2011-12-22 21:22:53Z

3

<div id="popup" style="color:#fff; background:#000; width:650px; display:none;">
    blah blah blah blah
</div>

You need to hide this div while it is on the page. The dialog will then unhide it and display it for you.

answered Dec 22, 2011 at 21:22

Keith.Abramo

6,9652 gold badges34 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Greg Pettit Over a year ago

I'd take it a step further; instead of inline styles, move this to the CSS stylesheet. But this is the right idea.

ionfish Over a year ago

oh yeah.. duh. i didnt know it would auto unhide it for me.

ionfish Over a year ago

yeah i know inline styles are frowned upon. just easy right now while im building the page.

JaredMcAteer Over a year ago

Beware, it's easy now, but when your page is nearly complete and you look at all the inline styles you now have to refactor into a stylesheet you may be kicking yourself for not just doing it from the start.

tsilik_ · Accepted Answer · 2011-12-22 21:30:36Z

0

using css add
display:none;

or using JQuery add
$('#popup').hide();

answered Dec 22, 2011 at 21:30

tsilik_

944 bronze badges

Comments

Alnitak · Accepted Answer · 2011-12-22 21:36:16Z

0

It's on the main page because that's where you put it!

You need to hide the div (css - display: none) when its first created.

answered Dec 22, 2011 at 21:36

Alnitak

341k72 gold badges420 silver badges503 bronze badges

Collectives™ on Stack Overflow

Jquery UI dialog box.. dialog box content loading on main page

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related