Modal-dialog nie ukryje na stronie obciążenia

Question

Próbuję utworzyć okno modalne po prostu pokazać zawartość HTML (lub jakiegoś innego):

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

Kiedy wyświetlić stronę, okno jest wbudowany i nie ukryty. Oto mój html:

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

Co robię źle?

Answer 1

Należy ustawić właściwość false autoOpen poniżej pewne odniesienie

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

Oto przykład

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

Ukryj div za pomocą CSS jak takie:

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

Teraz będzie się wyświetlać tylko po wezwaniu.