Назад к задачамПолучайте помощь с лайвкодингом в реальном времени с Sobes Copilot
Junior — Senior
11
Обработчик клика за пределами модального окна
Условие задачи
Создайте обработчик события, который активируется только при взаимодействии вне области модального окна. Такой обработчик будет вызывать функцию onClose() для закрытия модального окна.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>replit</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<style>
.modal {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, .5);
display: flex;
justify-content: center;
align-items: center;
}
.modal-content {
background-color: #fff;
height: 300px;
width: 300px;
display: flex;
justify-content: center;
align-items: center;
}
button {
font-size: 22px;
}
</style>
<div class="modal">
<div class="modal-content">
<button>
Click on me!
</button>
</div>
</div>
<script>
function onClose() {
console.log('Close modal')
}
</script>
<script src="script.js"></script>
</body>
</html>