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>

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

对话框的主体未显示（所有显示的都是标题栏）
当我在对话框外单击时，对话框不会关闭。我必须单击角落中的“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");
});

Answer 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

Answer 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/

Answer 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");
    });
});

jQuery UI对话框不会出现

4 个答案: