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?

Answer 1

<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.

Answer 2

using css add
display:none;

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

Answer 3

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.