jquery - モーダルダイアログはページの読み込み時に非表示になりません

Question

コンテンツ（ある種のhtmlなど）だけを表示するモーダルダイアログを作成しようとしています。

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

ページを表示すると、ダイアログはインラインで非表示になりません。これが私のhtmlです：

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

私は何が間違っているのですか？

Answer 1

プロパティをfalseに設定する必要がありautoOpenます。以下に参照を示します。

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

これが例です

$(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;
    });

});