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” görünen küçük bir penceredir. Genellikle giriş formları, bildirimler veya onaylar için kullanılır. Şöyle görünebilir:

Temel fikirler:

Kalıcı pencere 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 değerini ayarlar.
Çoğu zaman kalıcı pencerenin dışına (koyu katmanın üzerine) tıklayarak da pencereyi kapatabilirsin.

<!-- Modalı açma düğmesi -->
<button onclick="openModal()">Open Modal</button>
<!-- Modal arka plan katmanı + içerik -->
<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

Uzay temalı düğmelerin, ilginç uzay bilgilerini bir modal pencerede gösterdiği bir web sayfamız var. Herhangi bir uzay bilgisi düğmesine tıklandığında openModal adlı bir işlev tetiklenir. Görevin, modal pencerenin görünür olmasını sağlamak için openModal içindeki kodu yazmaktır.

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>

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