jquery ui modal issue: text briefly shows - jquery-ui

Question

I am using the jquery ui basic dialog modal. When you refresh chrome, the jquery ui modal text briefly shows up in chrome and ie but not in firefox and I am trying to figure out a way to prevent that from happening.
Here's what I have so far:
<div id="dialog-modal" title="Blah" style="visiblity:hidden;">
Blah blah blah
</div>
<script>
$(function() {
$( "#dialog-modal" ).dialog({
height: 265,
width:720,
modal: true,
autoOpen:false
});
$('#thelink').click(function(){$("#dialog-modal").dialog('open');}
);
$("#accordion_nav").accordion({scroll:'true'});
});
</script>
Read More
This stops the text from appearing, but now, I need to attach visibility:visible onclick.
Regards,
umbre gachoong

Answer 1

I'm not sure, if this is going to work for you, but you can try to put the HTML for the dialog-model below the script.
I guess it depends on which versions of jquery and jquery ui you are using.
I made this fiddle and it works fine in Chrome: http://jsfiddle.net/nL437/
<script type="text/javascript">
$(function() {
$("#dialog-modal").dialog({
height: 265,
width:720,
modal: true,
autoOpen: false
});
$('#thelink').click(function(){
$("#dialog-modal").dialog('open');
});
$("#accordion_nav").accordion({scroll:'true'});
});
</script>
<div id="dialog-modal" title="Blah">
Blah blah blah
</div>
Read More

Answer 2

I cannot elucidate the technical reason why this works as it does, but (if I understand the question correctly) you can try moving the subsequent command (i.e. .scroll) into the close section of the jQUI dialog, like this:
jsFiddle Demo
<script type="text/javascript">
$(function() {
$("#dialog-modal").dialog({
height: 265,
width:720,
modal: true,
autoOpen: false,
close: function() {
$("#accordion_nav").accordion({scroll:'true'});
}
});
$('#thelink').click(function(){
$("#dialog-modal").dialog('open');
});
}); //END document.ready()
</script>
In my experience, the next programmatic change to the view will auto-close the jQUI dialog, so putting the event in the close function for the dialog will allow the events to happen in the desired sequence.
In the above jsFiddle demo, note how the blue box is changed to red even before the dialog is displayed, while the change to yellow happens only after the dialog has closed.