模态的对话中不会隐藏在页面加载

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

您应该设置autoOpen属性设置为false，下面是一些参考

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

}); 

Answer 2

隐藏使用CSS像这样的DIV：

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

现在它只会在被调用时显示。