نافذة منبثقة (فتح/إغلاق)

جزء من قسم 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 للعنصر ذي المعرّف "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>