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. 當我單擊對話框外部時，對話框不會關閉。 我必須單擊角落中的“x”才能關閉對話框。

我一直在這里閱讀大量相關問題，但我嘗試的任何東西似乎都沒有用。 有什么建議？

Answer 1

我相信你遇到的問題來自這條線：

dialog.hide();

我建議從對話框div中刪除所有對話框內容，並在實際顯示對話框時填充它。

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

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

至於處理close部分，您是否嘗試將主頁中的所有內容嵌套在自己的<div>中，然后處理該click事件？

<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'); 
            });
        }
    });
}

示范

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