У меня есть модальный диалог jquery и еще один элемент, который принимает событие ESC за диалогом. Когда диалог jQuery активирован, я не хочу, чтобы это событие ESC было распространено. Теперь случается так, что когда я нажимаю на ESC, он закрывает диалог и запускает обработчик события ESC в фоновом элементе.
Как я могу использовать событие ESC, когда диалог jQuery отклоняется?
Внутренний диалог диалога jQuery UI closeOnEscape реализуется путем присоединения прослушивателя keydown к самому документу. Поэтому диалоговое окно закрывается после того, как событие keydown всплыло до верхнего уровня.
Итак, если вы хотите продолжать использовать ключ-побег, чтобы закрыть диалоговое окно, и вы хотите, чтобы ключ-побег распространялся на родительские узлы, вам необходимо реализовать функцию closeOnEscape самостоятельно, а также использовать метод stopPropagation объекта события (см. статья MDN на event.stopPropagation).
(function() {
var dialog = $('whatever-selector-you-need')
.dialog()
.on('keydown', function(evt) {
if (evt.keyCode === $.ui.keyCode.ESCAPE) {
dialog.dialog('close');
}
evt.stopPropagation();
});
}());
Что это такое - прослушивать все события смены ключей, которые происходят в диалоговом окне. Если клавиша была нажата клавишей эвакуации, вы закрываете диалоговое окно как обычно, и независимо от того, что вызов evt.stopPropagation удерживает нажатие клавиши вверх до родительских узлов.
У меня есть живой пример, показывающий это здесь - http://jsfiddle.net/ud9KL/2/.
Вам нужно закрытьOnEscape...
Пример кода:
$(function() {
$("#popup").dialog({
height: 200,
width: 400,
resizable: false,
autoOpen: true,
modal: true,
closeOnEscape: false
});
});
Смотрите это в прямом эфире: http://jsfiddle.net/vutdV/
Вы можете использовать следующие
$(document).keyup(function (e) {
if (e.keyCode == 27) {
$('#YourDialogID').dialog('close')
}
});
Вам нужно будет изменить код для своего элемента за диалогом, чтобы узнать, было ли открыто диалоговое окно И нажата клавиша эвакуации и игнорировать эту ситуацию.