Как закрыть модальное окно при нажатии клавиши ESCJavascript

Форум по Javascript
Ответить
Anonymous
 Как закрыть модальное окно при нажатии клавиши ESC

Сообщение Anonymous »

Очевидно, что мое модальное окно закрывается, когда я нажимаю значок закрытия или щелкаю за пределами модального окна, но мне также нужно, чтобы оно закрывалось, когда я нажимаю клавишу Escape. Как этого добиться? Спасибо
Я не могу опубликовать этот довольно простой вопрос без добавления текста, поэтому, пожалуйста, не обращайте внимания на следующее... Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut Labore et dolore magna aliqua.


Изображение




×
Изображение




var modal = document.getElementById("Modal");

var btn = document.getElementById("btn");

var span = document.getElementsByClassName("close")[0];

const closeButton = document.getElementById('closeButton');

btn.onclick = function() {
modal.style.display = "block";
}

span.onclick = function() {
modal.style.display = "none";
}

window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}

.modal {
display: none;
position: fixed;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.4);
}

.modal-content {
background-color: #fff5ee;
margin: auto;
padding: 20px;
border: 1px solid #c7effb;
width: 80%;
}

.close {
color: #b385dc;
float: right;
font-size: 28px;
font-weight: bold;
}

.close:hover,
.close:focus {
color: blueviolet;
text-decoration: none;
cursor: pointer;
}


Подробнее здесь: https://stackoverflow.com/questions/798 ... he-esc-key
Ответить

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

Вернуться в «Javascript»