modal-diálogo no ocultará al cargar la página

Question

Estoy tratando de crear un diálogo modal para mostrar simplemente el contenido (html de algún tipo o de otro tipo):

<script> 
$.fx.speeds._default = 1000; 
$(function() { 
    $("#dialog").dialog({ 
     autoOpen: false, 
     closeOnEscape: true, 
     modal: true, 
     position: 'center', 
     width: 800, 
     height: 600, 
     show: "blind", 
     hide: "explode" 
    }); 

    $("#opener").click(function() { 
     $("#dialog").dialog("open"); 
     return false; 
    }); 

}); 
</script> 

Cuando veo la página, el diálogo es en línea y no oculto. Aquí está mi html:

<div id="dialog">This is my dialog that should be hidden until called</div> 
<button id="opener">I Open the Dialog</button> 

¿Qué estoy haciendo mal?

Answer 1

Se debe establecer la propiedad autoOpen a falso, a continuación hay alguna referencia

http://jqueryui.com/demos/dialog/#option-autoOpen

Este es un ejemplo

$(function() { 
    $("#dialog").dialog({ 
     closeOnEscape: true, 
     modal: true, 
     position: 'top', 
     width: 800, 
     height: 600, 
     show: "blind", 
     hide: "explode", 
     autoOpen: false ///added this line 
    }); 

    $("#opener").click(function() { 
     $("#dialog").dialog("open"); 
     return false; 
    }); 

}); 

Answer 2

Ocultar el div con css, como por ejemplo:

<div id="dialog" style="display:none;">This is my dialog that should be hidden until called</div> 

Ahora solo se mostrará cuando se solicite.