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.