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

جزء من قسم 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>