Назад к задачам
Junior — Senior
11

Обработчик клика за пределами модального окна

Получайте помощь с лайвкодингом в реальном времени с Sobes Copilot
Условие задачи

Создайте обработчик события, который активируется только при взаимодействии вне области модального окна. Такой обработчик будет вызывать функцию 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>