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:

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

Modalın içinde, kapatma düğmesi (×) closeModal() işlevini çalıştırır → display: none ayarlanır.
Çoğu zaman modalın dışına (koyu kaplamanın üzerine) tıklayarak da onu kapatabilirsiniz.

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

Uzay temalı düğmelerin bir kalıcı pencerede ilginç uzay gerçeklerini gösterdiği bir web sayfamız var. Herhangi bir uzay gerçeği düğmesine tıklandığında openModal adlı bir işlev tetiklenir. Göreviniz, kalıcı pencerenin görünür hâle gelmesi için openModal içindeki kodu yazmaktır.

Bunu yapmak için, "fact" kimliğine sahip öğ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>