Modal (açma/kapama)

Coddy'nin HTML Journey'sinin JavaScript Eylemde bölümünün bir parçası. Ders 3 / 27.

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

Temel fikirler:

Modal varsayılan olarak gizlidir (display: none).
“Aç” düğmesine tıklamak openModal() işlevini çalıştırır → display: block olarak ayarlar.

Kalıcı pencerenin içinde, kapatma düğmesi (×) closeModal() işlevini çalıştırır → display: none ayarlar.
Çoğu zaman, kalıcı pencerenin dışına (koyu katmanın üzerine) tıklayarak da pencereyi kapatabilirsiniz.

<!-- Modal pencereyi açma düğmesi -->
<button onclick="openModal()">Open Modal</button>
<!-- Modal pencerenin kaplama alanı + içeriği -->
<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>

Görev

Kolay

Modal pencerede uzayla ilgili ilginç bilgileri gösteren, uzay temalı düğmeler içeren bir web sayfamız var. Herhangi bir uzay bilgisi düğmesine tıklandığında openModal adlı bir fonksiyon tetiklenir. Görevin, modal pencerenin görünür olması için openModal içine kodu yazmak.

Bunu yapmak için, "fact" kimliğine sahip öğenin display özelliğini "block" olarak ayarla.

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>

  <!-- Modal pencereleri açan düğmeler -->
  <button onclick="openModal('fact')">Fact 1</button>

  <!-- Kaplama + Modal İçeriği -->
  <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>