Modal (فتح/إغلاق)

جزء من قسم JavaScript in Action في رحلة HTML على Coddy — الدرس 3 من 27.

النافذة المنبثقة (modal) هي نافذة صغيرة تظهر "فوق" الصفحة لجذب انتباه المستخدم. تُستخدم غالباً لنماذج تسجيل الدخول، أو الإشعارات، أو التأكيدات. هكذا قد تبدو:

الأفكار الرئيسية:

النافذة المنبثقة مخفية افتراضيًا (display: none).
النقر على زر "فتح" يُشغل الدالة openModal() ← يضبط display: block.

داخل النافذة المنبثقة (modal)، يقوم زر الإغلاق (×) بتشغيل الدالة closeModal() ← يضبط display: none.
غالبًا يمكنك أيضًا جعلها تُغلق عن طريق النقر خارج النافذة المنبثقة (modal) (على الطبقة الداكنة المغطاة).

<!-- Button to open modal -->
<button onclick="openModal()">Open Modal</button>

<!-- Modal overlay + content -->
<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>

التحدي

سهل

لدينا صفحة ويب تحتوي على أزرار بطابع الفضاء تعرض حقائق فضائية مثيرة للاهتمام في نافذة منبثقة (modal). يتم استدعاء دالة تسمى 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>

  <!-- Buttons that open modals -->
  <button onclick="openModal('fact')">Fact 1</button>

  <!-- Overlay + Modal Content -->
  <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>