חלון מודאלי (פתיחה/סגירה)

חלק מהיחידה 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>