modale-finestra non nasconderà il caricamento della pagina

Question

Sto cercando di creare una finestra di dialogo modale per mostrare solo i contenuti (html di qualche tipo o altro):

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

Quando ho visualizzare la pagina, la finestra di dialogo è in linea e non nascosto. Ecco il mio html:

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

Cosa sto facendo male?

Answer 1

È necessario impostare la proprietà autoOpen su false, sotto è qualche riferimento

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

Ecco un esempio

$(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

Nascondi la div usando css come tale:

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

Ora verrà visualizzato solo quando richiesto.