8

我正在尝试创建一个模式对话框来显示内容(某种或其他的 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>

我究竟做错了什么?

4

2 回答 2

10

使用 css 隐藏 div,如下所示:

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

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

于 2014-04-15T22:38:53.243 回答
8

You should set the autoOpen property to false, below is some reference

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

Here is an example

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

});
于 2011-09-27T18:35:09.293 回答