Диалоговое окно jQuery UI closeOnEscape не работает для нескольких открытых диалоговых окон

#jquery #jquery-ui #jquery-dialog

#jquery #jquery-пользовательский интерфейс #jquery-dialog

Вопрос:

Мой сценарий:

При нажатии на определенный элемент в Dialog1 открывается Dialog2.
Когда вы нажимаете Escape, чтобы закрыть Dialog2, работает должным образом и закрывает Dialog2.
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"); }

}

Ответ №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(); вместо этого, вы избегаете появления, возможно, раздражающей пунктирной линии вокруг диалогового окна.

1. Это неловко! Совершенно верно. Мне просто нужна была еще одна пара глаз. Спасибо! Хороший совет по этому поводу .dialog («виджет») тоже … Я всегда задавался вопросом, почему он сделал эту пунктирную линию вокруг первого ввода внутри диалога, когда он был сфокусирован.

2. Хотя мой (индекс> 0) совпадает с (индекс — 1 > = 0), но я определенно забыл индекс-1 при использовании в массиве.

3. Ссылка на рабочий пример: jsfiddle.net/L8J7Y не работает. Я нахожусь на бета-версии 17.0.963.46. Мне пришлось закрыть $previousDialog и снова открыть его, чтобы сфокусироваться. Мне это не нравится, но я все равно должен с этим согласиться: (

4. @kushakshigundu: на какой номер версии вы ссылаетесь? Пример по-прежнему отлично работает для меня…

Ответ №2:

как насчет того, чтобы в функцию закрытия вы поместили это

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

поскольку все диалоги имеют этот класс, он закроет все диалоги

1. Я не хочу закрывать все диалоги немедленно. Я хотел, чтобы предыдущее диалоговое окно было сфокусировано, чтобы, если кто-то ничего не трогал и хотел нажать Escape в любое время, оно закрыло бы это предыдущее диалоговое окно, которое теперь было текущим. К вашему сведению, это тоже не совсем моя полная функция закрытия. Я опустил код, который не имеет отношения к рассматриваемому вопросу.