Модальное окно (открытие/закрытие)

Часть раздела JavaScript в действии путешествия по HTML на Coddy. Урок 3 из 27.

Модальное окно — это небольшое окно, которое появляется «поверх» страницы, чтобы привлечь внимание пользователя. Его часто используют для форм входа, уведомлений или подтверждений. Вот как оно может выглядеть:

Ключевые идеи:

Модальное окно по умолчанию скрыто (display: none).
При нажатии на кнопку «Открыть» запускается функция openModal() → устанавливает display: block.

Внутри модального окна кнопка закрытия (×) вызывает функцию closeModal() → задаёт значение display: none.
Часто можно также закрыть окно, щёлкнув за пределами модального окна (на тёмном затемнении).

<!-- Кнопка для открытия модального окна -->
<button onclick="openModal()">Open Modal</button>
<!-- Затемняющий фон и содержимое модального окна -->
<div id="overlay" style="display:none;">
  <div class="modal">
    <span onclick="closeModal()">×</span>
    <p>This is a modal window.</p>
  </div>
</div>
<script>
  function openModal() {
    document.getElementById("overlay").style.display = "block";
  }
  function closeModal() {
    document.getElementById("overlay").style.display = "none";
  }
</script>

Задание

Легко

У нас есть веб-страница с кнопками в космической тематике, которые показывают интересные факты о космосе в модальном окне. При нажатии на любую кнопку с фактом о космосе вызывается функция openModal. Твоя задача — написать код внутри openModal, чтобы модальное окно стало видимым.

Для этого установи свойство display элемента с ID "fact" в значение "block".

Попробуйте сами

<!DOCTYPE html>
<html>
<head>
  <title>Space Facts – Modal Example</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

  <h1>Space Facts</h1>
  <p>Click the button below to learn something cool about space.</p>

  <!-- Кнопки, открывающие модальные окна -->
  <button onclick="openModal('fact')">Fact 1</button>

  <!-- Затемняющий слой + содержимое модального окна -->
  <div id="overlay" class="overlay" onclick="closeModal()">
    <div id="fact" class="modal">
      <span class="close-btn" onclick="closeModal()">×</span>
      <h2>Shooting Stars</h2>
      <p>Shooting stars are actually tiny meteors burning up as they enter Earth’s atmosphere.</p>
    </div>
  </div>

  <script src="script.js"></script>
</body>
</html>