2

我几乎完全是 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. 当我在对话框外部单击时，对话框不会关闭。我必须单击角落的“x”才能关闭对话框。

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

4

4 回答 4

3

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

dialog.hide();

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

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

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

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

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

$("#mainPageDiv").click(function(){
    $("#dialog").dialog("close");
});
于 2012-12-21T17:58:24.323 回答
1

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

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

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

示范

于 2012-12-21T18:35:02.170 回答
0

我看到你的：

$("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/

于 2012-12-21T18:29:31.157 回答
0

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

<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");
    });
});
于 2012-12-21T18:51:11.817 回答