javascript - jQuery UI 对话框不出现

Question

我对 JavaScript 和 jQuery 几乎是个菜鸟，而且我在让基本对话框正常工作时遇到了麻烦。这是我的代码:

<script type="text/javascript">
    $(document).ready(function() {
        var dialog = $("#dialog");

        dialog.dialog({
            title: "Dialog",
            modal: true,
            draggable: false,
            resizable: false,
            autoOpen: false,
            width: 500,
            height: 400
        });

        dialog.hide();
    });

    function showDialog() {
        $("#dialog").dialog("open");
    }


    $("ui-widget-overlay").click(function() {
        $(".ui-dialog-titlebar-close").trigger("click");
    });
</script>

<div id="dialog">
    Dialog text.
</div>

<button onclick="showDialog()">Show Dialog</button>

当我点击按钮时，对话框的标题栏出现，页面背景变暗，但有两个问题:

1. 对话框主体不显示(只显示标题栏)
2. 当我在对话框外单击时，对话框不会关闭。我必须单击 Angular 落的“x”才能关闭对话框。

我在这里阅读了大量相关问题，但我尝试的任何方法似乎都不起作用。有什么建议吗？

Answer 1

我相信您遇到的问题来自这一行:

dialog.hide();

我的建议是从对话框 div 中删除所有对话框内容，并在实际显示对话框时填充它。

<div id="dialog"></div>

function showDialog()
{
    $("#dialog").html("Dialog Text.");
    $("#dialog").dialog("open");
}

至于处理关闭部分，您是否尝试过将主页中的所有内容嵌套在 <div> 中？自己然后处理那个点击事件？

<div id="mainPageDiv">
</div>

$("#mainPageDiv").click(function(){
    $("#dialog").dialog("close");
});