Modal (aç/kapat)

Coddy'nin HTML Journey'sinin JavaScript in Action bölümünün bir parçası — ders 3 / 27.

Modal, kullanıcının dikkatini çekmek için sayfanın “üstünde” beliren küçük bir penceredir. Genellikle giriş formları, bildirimler veya onaylamalar için kullanılır. Şöyle görünebilir:

Temel fikirler:

Modal, varsayılan olarak gizlidir (display: none).
“Open” butonuna tıklamak openModal() fonksiyonunu çalıştırır → display: block ayarını yapar.

Modalın içinde, kapatma düğmesi (×) closeModal() fonksiyonunu çalıştırır → display: none olarak ayarlar.
Genellikle, modalın dışına (koyu katman üzerine) tıklayarak da kapanmasını sağlayabilirsiniz.

<!-- Modalı açmak için buton -->
<button onclick="openModal()">Modalı Aç</button>

<!-- Modal katmanı + içerik -->
<div id="overlay" style="display:none;">
  <div class="modal">
    <span onclick="closeModal()">×</span>
    <p>Bu bir modal penceresidir.</p>
  </div>
</div>

<script>
  function openModal() {
    document.getElementById("overlay").style.display = "block";
  }
  function closeModal() {
    document.getElementById("overlay").style.display = "none";
  }
</script>

Görev

Kolay

Bir modal penceresinde ilginç uzay gerçeklerini gösteren uzay temalı butonların bulunduğu bir web sayfamız var. Herhangi bir uzay gerçeği butonuna tıklandığında openModal adlı bir fonksiyon tetiklenir. Göreviniz, modal penceresinin görünür olması için openModal içindeki kodu yazmaktır.

Bunu yapmak için, ID'si "fact" olan öğenin display özelliğini "block" olarak ayarlayın.

Kendin dene

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