jQuery UI 对话框 closeOnEscape 不适用于多个打开的对话框

Question

我的场景：

1. 当单击 Dialog1 中的特定元素时，Dialog2 将打开。

2. 当您按 Escape 关闭 Dialog2 时，将按预期工作并关闭 Dialog2。

3. Dialog1 仍然存在，您可能会认为可以通过再次按 Escape 来关闭它，但事实并非如此。您必须先单击该对话框，然后按 Escape 才能将其关闭。

这是我尝试过的方法，但没有成功：

// Array to hold all of our open dialogs id's
var openDialogs = [];

// the open: method in my dialog
open: function() {

    openDialogs[openDialogs.length] = $(this).attr("id");

}

// the close: method in my dialog
close: function() {

    var index = $.inArray($(this).attr("id"), openDialogs),
    $previousDialog = (index > 0) ? $("#" + openDialogs[index]) : undefined;

    // remove the current dialog from the array via Jon Resig's remove() method
    openDialogs.remove(index);          

    // set focus to previously opened dialog
    if ($previousDialog) { $previousDialog.focus(); }

    // I've even tried:
    //
    // if ($previousDialog) { $previousDialog.dialog("moveToTop"); }

}

Answer 1

这一行：

var index = $.inArray($(this).attr("id"), openDialogs),
$previousDialog = (index > 0) ? $("#" + openDialogs[index]) : undefined;

将使 $previousDialog 引用当前对话框（正在关闭的对话框）。 index 是正在关闭的对话框的索引。

因此，稍后在这一行：

if ($previousDialog) { $previousDialog.focus(); }

在关闭的对话框上调用 focus() 。

我相信你想要的是这样的：

close: function() {
    var index = $.inArray($(this).attr("id"), openDialogs),
        $previousDialog = (index - 1 >= 0) ? $("#" + openDialogs[index - 1]) : undefined;

    // remove the current dialog from the array via Jon Resig's remove() method
    openDialogs.remove(index);

    // set focus to previously opened dialog
    if ($previousDialog) {
        $previousDialog.focus();
    }
}

这是一个工作示例： http://jsfiddle.net/L8J7Y/

我还注意到，如果您使用 $previousDialog.dialog("widget").focus(); 相反，您可以避免在对话框周围出现可能令人讨厌的虚线。

Answer 2

在关闭函数中如何将其放入，

 $(".ui-dialog-content").dialog("close");

因为所有对话框都具有该类，因此它将关闭所有对话框