Modal (buka/tutup)

Termasuk bagian JavaScript dalam Aksi dalam perjalanan HTML di Coddy. Pelajaran 3 dari 27.

modal adalah jendela kecil yang muncul “di atas” halaman untuk menarik perhatian pengguna. Modal sering digunakan untuk formulir login, notifikasi, atau konfirmasi. Seperti inilah tampilannya:

Ide utama:

Modal tersembunyi secara default (display: none).
Mengklik tombol “Open” menjalankan fungsi openModal() → mengatur display: block.

Di dalam modal, tombol tutup (×) menjalankan fungsi closeModal() → mengatur display: none.
Sering kali, kamu juga bisa menutupnya dengan mengeklik di luar modal (pada lapisan gelap).

<!-- Tombol untuk membuka modal -->
<button onclick="openModal()">Open Modal</button>
<!-- Lapisan penutup modal + konten -->
<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>

Tantangan

Mudah

Kita memiliki halaman web dengan tombol bertema luar angkasa yang menampilkan fakta menarik tentang luar angkasa di jendela modal. Fungsi bernama openModal dipicu saat tombol fakta tentang luar angkasa diklik. Tugasmu adalah menulis kode di dalam openModal agar jendela modal terlihat.

Untuk melakukannya, atur property display dari elemen dengan ID "fact" menjadi "block".

Coba sendiri

<!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>

  <!-- Tombol untuk membuka modal -->
  <button onclick="openModal('fact')">Fact 1</button>

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