打开jquery对话框后页面空白

时间:2015-01-24 11:50:09

标签: javascript jquery html

我的jQuery对话框有一个小问题。这是.html页面的主体

<body onload="document_load()">

    <div class="center" style="position: relative;">
        <canvas style="position: absolute;" id="canvas" width="1300" height="1000" tabindex="0"></canvas>

        <input type="button" id="state" value="Print State" style="position: absolute; top: 100px; left: 5px; width: 110px; height: 25px;" ondblclick="printState();" />
        <input type="button" id="opener" value="Information" style="position: absolute; top: 140px; left: 5px; width: 110px; height: 25px;" onclick="open();" />
        <label id="label" style="position: absolute; top: 400px; left: 200px; width: 500px; height: 19px; font: 200; color:black"></label>


        <div id="dialog-message" title="Important information" style="display:none">
            <span class="ui-state-default"><span class="ui-icon ui-icon-info" style="float:left; margin:0 7px 0 0;"></span></span>
            <div style="margin-left: 23px;">
                <p>
                    Example
                    <br /><br />
                    Example.<br /><br />
                    Another line which demonstrates the auto height adjustment of the dialog component.
                </p>
            </div>
        </div>

    </div>
</body>

&#34;揭幕战&#34;按钮应该打开对话框,这是open()函数:

    function open() {
    $("#dialog-message").dialog({

        modal: true,
        draggable: false,
        resizable: false,
        position: ['center', 'top'],
        show: 'blind',
        hide: 'blind',
        width: 400,
        dialogClass: 'ui-dialog-osx',
        buttons: {
            "OK": function () {
                $(this).dialog("close");
                return false;
            }
        }
    });
}

但是当我点击按钮时,页面变成空白,没有任何内容。为什么?我尝试将对话框消息<div>放在中心<div>之外,但结果是一样的。

1 个答案:

答案 0 :(得分:1)

将函数名称从open更改为其他名称。我不知道为什么会这样。也许是因为有一些同名的内部功能。 演示:http://jsfiddle.net/GCu2D/531/

function openD() { // I changed the name and it worked.
    $("#dialog-message").dialog({
        modal: true,
        draggable: false,
        resizable: false,
        position: ['center', 'top'],
        show: 'blind',
        hide: 'blind',
        width: 400,
        dialogClass: 'ui-dialog-osx',
        buttons: {
            "OK": function() {
                $(this).dialog("close");
                return false;
            }
        }
    });
}