Закрыть модальные окна по клику esc?

Question

[eRKa]

Приветствую!

Есть бутстраповское модальное окно, внутри которого есть поле для загрузки файла с компьютера, соответственно есть кнопка "Выберите файл". Когда кликается на эту кнопку, открывается модальное виндовс окно. В IE по нажатию esc, сначала закроется виндовское окно, если еще раз нажать esc закроется веб модальное окно. В Chrome по нажатию esc закрывается сразу два окна, а нужно чтобы тоже по очереди.

Нагуглить решение не удалось. Может кто в курсе?

Добавление tabindex проблему не решило.

Answer 1

[Павел Корнилов]

<div id="modal_id" role="dialog" aria-hidden="true" data-backdrop="static" data-keyboard="false">Модальное окно, закрывающееся по esc</div>
<script>
	document.addEventListener('keypress', function (e) {
		if(e.keyCode === 27) document.getElementById('modal_id').hidden= 1;
	}); 
</script>

Comments

[eRKa]

У меня открыто два модальных окна: виндовское на выбор файла и вебовское бутстраповское. Виндовское так же слушает esc и закрывается по нажатию этой кнопки. От того, что настройку перенесли в js, не понятно чем это может помочь, если по нажатию esc закрывается сразу два окна, а хочется чтоб по очереди.

Но я все-таки попробовал Ваш вариант. Он в хроме не работает. Я так понял, что хром игнорит клавишу esc. В метод просто не заходит, на любую клавишу заходит, кроме esc. В IE все в порядке, console.log внутри у меня отработал. Но в IE и так отрабатывает ожидаемо, с стандартными настройками модального окна в html, по нажатию esc сначала закрывается виндовское окно выбора файла, а когда нажимаю еще раз esc, закрывается модальное. Хочется чтоб так же работало в Хроме.

[Павел Корнилов]

Давайте код обработчика, закрывающего второе окно.

[eRKa]

Погуглил, узнал что keypress в хроме не работает для некоторых клавиш тут
Поменял на keydown и действительно все стало как надо) Не совсем понятно почему так работает, но это я потом покопаюсь.
Спс.

[Павел Корнилов]

Даже не вспомнил про этот баг.
На здоровье.
Правильная благодарность - отметить решением.

Answer 2

[Егор Перегудов]

Нужно добавить
tabindex="-1"
в строку, которая отвечает за закрытие. Вот так должно получиться:

<a href="#my-modal" data-keyboard="true" data-toggle="modal">Open Modal</a>

<div class='modal fade hide' id='my-modal' tabindex='-1'>
<div class='modal-body'>
<div>Test</div>
</div>

Можете еще выключить закрытие через Esc, для этого нужно добавить data-backdrop="static" и data-keyboard="false"

HTML:

<div id="modal_id" role="dialog" aria-hidden="true" data-backdrop="static" data-keyboard="false">

Вариант выключения через JavaScript:

$('#modal_id').modal({ backdrop: 'static', keyboard: false });

Comments

[eRKa]

Нужно добавить
tabindex="-1"

Я это пробовал, поэтому сразу написал, что

Добавление tabindex проблему не решило.

Можете еще выключить закрытие через Esc

В том то и дело, что мне нужно, чтоб это закрытие было, так хочет заказчик. Он хочет чтоб у модальных окон было

backdrop: true, keyboard: true

Поэтому отключить что-либо из этого - не решение.

[Егор Перегудов]

eRKa, вы написали там где классы "fade hide"?

[eRKa]

Егор Перегудов, да. Но к сожалению этот способ не работает. Пришлось логику закрытия окон перенести в js. Спасибо за соучастие.

Answer 3

[webtostep]

У меня все решилось так
document.addEventListener('keydown', function(e) {
if (e.key === 'Escape') {
//ваша функция закрытия окна
hideModal()
}
});