jQuery UI 对话框不出现答案

【问题标题】：jQuery UI dialog box does not appearjQuery UI 对话框不出现
【发布时间】：2012-12-21 17:52:19
【问题描述】：

我几乎是 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>

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

对话框主体不显示（只显示标题栏）
当我在对话框外单击时，对话框不会关闭。我必须点击角落的“x”才能关闭对话框。

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

【问题讨论】：

@FritsvanCampen - 你的意思是 dialog.dialog() 没有被调用？我认为是，因为宽度设置会影响标题栏的宽度。
@Nate-虽然我很高兴被授予答案，并且我相信我确实正确回答了您的原始问题（hide() 问题），但下面有更好的答案可能更值得。

标签： javascript jquery jquery-ui jquery-ui-dialog

【解决方案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");
});

【讨论】：

太好了，解决了 3/4 的问题！该对话框现在可以正确显示，但在它外部单击仍然不会关闭它。
“点击外部”是什么意思？您是否尝试从除 div 之外的任何地方处理单击事件以关闭它？为什么不在对话框中放一个关闭按钮或在标题栏中使用默认的“X”？
是的，你一开始说的。由于大多数网站都允许，现在大多数人都直观地在弹出窗口之外单击以将其关闭（这比导航到“x”并单击它要快得多）。所以“点击外部”是指除了对话框之外的任何地方。
好吧，我想你可以将主页中的所有内容嵌套在它自己的
中，然后处理它的点击事件。
我很确定 jQuery Dialog 会自动隐藏对话框 div，无论是否有内容，因此无需手动隐藏或延迟加载。至于外部的点击，只需将点击处理程序绑定到ui-widget-overlay，因为它覆盖了模态后面的文档。

【解决方案2】：

只需使用模态对话框并在他们单击叠加层时关闭对话框。此外，您不需要为此在$(document).ready 中添加任何代码。

function showDialog() {
    var dialog = $("#dialog");

    dialog.dialog({
        title: "Dialog",
        modal: true,
        open: function () { 
            $('.ui-widget-overlay').bind('click', function () {
                dialog.dialog('close'); 
            });
        }
    });
}

Demonstration

【讨论】：

这似乎是最好的解决方案，虽然我不明白如果没有ready 电话你怎么能做到这一点（因为我还不够聪明）。此外，根据 jQuery 的版本，bind 是否已被 on 弃用？
是的，bind 只是在 1.7+ 中调用 on，delegate 也是如此。您不需要在准备好的处理程序中编写任何代码，因为对话框可以在打开时动态构建。

【解决方案3】：

我看到你的：

$("ui-widget-overlay").click(

也许应该选择一个类：

$(".ui-widget-overlay").click(

这不会发生，因为它不存在，因此您需要将其挂钩到文档。

并且dialog.hide(); 是不需要的，因为它会在变成对话框时自动隐藏

所以你应该有：

  $(document).on('click',".ui-widget-overlay", function() {
        $(".ui-dialog-titlebar-close").trigger("click");
  });

更简单：（如果你没有其他对话框需要这样处理）

$(document).on('click',".ui-widget-overlay", function() {
   $("#dialog").dialog("close");
});

显示完整修改代码的示例小提琴：http://jsfiddle.net/GrFE3/2/

【讨论】：

【解决方案4】：

我将此作为附加答案添加，因为它的处理方式不同，更改标记，删除标记中的内联事件处理程序，使用您的按钮，并使用您的对话框变量（与您不同，但是.. .

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

<button id="showDialog">Show Dialog</button>

以及该标记的代码：

$(document).ready(function() {
    var dialog = $("#dialog");
    dialog.dialog({
        title: "Dialog",
        modal: true,
        draggable: false,
        resizable: false,
        autoOpen: false,
        width: 500,
        height: 400
    });
    $('#showDialog').click(function() {
        dialog.dialog("open");
    });
    $(document).on('click', ".ui-widget-overlay", function() {
        dialog.dialog("close");
    });
});

【讨论】：