Как предотвратить закрытие модального загрузчика при нажатии ESC и не фокусировке

#javascript #bootstrap-5

Вопрос:

Я использую модальный загрузчик для отображения сведений о некоторых записях в моей базе данных. Он включает в себя текстовые и графические вложения.Когда я нажал на вложение изображения, я показываю и фокусирую a div , чтобы отобразить это изображение во весь экран.

Я хочу, чтобы это изображение div было видно на экране (не содержит класса «d-none»), и я нажал Esc клавишу, div которая должна закрыться (добавить класс «d-none»). Я смог это сделать, добавив keydown к этому событие div . Однако модал также автоматически закрывается вместе с изображением div , когда я нажимаю Esc клавишу. Как я должен это предотвратить?

Я не хочу навсегда отключать функцию «Закрытие при нажатии клавиши Esc» модала, я просто хочу отключить ее, когда изображение div отображается на экране.

ПРИМЕЧАНИЕ: Если он включает скрипт, пожалуйста, дайте решение vanilla js.

Ответ №1:

Чтобы ответить на мой вопрос, добавление e.stopPropagation() внутри события keydown изображения div сработало для меня.

Я также добавил tabindex="0" в раздел изображения и установил фокус при отображении с помощью раздела изображения document.getElementById('#image-div').focus() .

Надеюсь, это поможет.