Sobes.tech
Back to tasks
Junior — Senior
25

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

Get help with live coding in real time with Sobes Copilot
Task condition

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