模态框（打开/关闭）

本课属于 Coddy HTML 学习旅程的“JavaScript 实战”单元。第 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 中编写代码，让模态窗口显示出来。

为此，将 ID 为 "fact" 的元素的 display 属性设置为 "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>