Jquery ui dialog question

Question

I started using the jquery ui library to add some enhanced UI elements to the asp.net app. and have run into a minor bug/problem:

I have a jquery UI dialog that is called when a button is clicked..the text for the dialog is all in a and is normaly hidden from the user, and then the jquery UI does its magic and uses that text to display the dialog - all works perfectly.

Here is the code:

<input type="button" value="Cancel This Event" onclick="$('#myCancelEventDialog').dialog('open');" />

and here is the div:

<div id="myCancelEventDialog" title="Cancel an Event or Meeting">
    <p>Are you sure you would like to cancel this event/meeting?</p>
</div>

Question is, everytime my form repaints, the "hidden" text actually flashes onto the page for a split second before it becomes hidden again. (i.e. the "are you sre you would like to cancel this event/meeting text actually is visible for a split second)

Is it possible to prevent this?

Answer 1

Set the height on the control to zero. This way it renders to the screen at 0 height? This is somewhat of a guess by the way...

Answer 2

I set the style on the div to "display: none". The dialog changes this when it displays.

 <div id="myCancelEventDialog"
      title="Cancel an Event or Meeting"
      style="display: none;">
     <p>Are you sure you would like to cancel this event/meeting?</p>
 </div>

Answer 3

Which browser? Also, you can experiment with CSS visibility by setting display:none and undoing that just before you pop up the dialog.