Sobes.tech
Назад к задачам
Junior — Senior
72

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

Условие задачи

livecode

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