打开 jQuery 对话框后页面空白

page blank after opening jquery dialog

本文关键字：空白 jQuery 对话框 打开      更新时间：2023-09-26

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

"opener"按钮应该打开对话框，这是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>之外，但结果是一样的。

将函数名称从 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;
            }
        }
    });
}
相关文章：