Html & Css İle Açılır Kapanır Bir Modal Penceresi Nasıl Yapılır?

Gereksinimler ve Ön Hazırlık

Bu projeyi gerçekleştirmek için bilgisayarınızda modern bir metin editörü (VS Code gibi) ve güncel bir web tarayıcısı (Chrome, Firefox veya Edge) bulunması yeterlidir. Herhangi bir sunucu tarafı dili veya karmaşık bir JavaScript çerçevesi gerekmemektedir. Projenizi oluştururken dosya yapınızın düzenli olması, kodun sürdürülebilirliği açısından önemlidir.

• Html5: Yapısal iskeleti oluşturmak için.
• Css3: Görünüm, animasyon ve konumlandırma için.
• JavaScript: Sadece tetikleme (açma/kapama) mantığı için.

Adım 1: Modal İçin Html İskeletini Oluşturma

Modal yapısı, sayfa içeriğinin üzerinde yüzen bir katmandır. Bu katmanı oluştururken, hem içeriği barındıran bir kapsayıcıya hem de modalı kapatmak için bir tetikleyiciye ihtiyacımız var.

Modalı Aç



  

    ×
    
Bu bir modal penceresidir.
  

Burada modalPencere id'si, JavaScript ile kontrolü sağlamak için kullanılırken, modal-icerik sınıfı pencerenin görsel tasarımını yönetmek için kullanılır.

Adım 2: Css ile Görsel Tasarım ve Konumlandırma

Modalın ekranın tam ortasında durması ve arka planı karartması için Css fixed konumlandırma özelliğini kullanırız. Ayrıca, varsayılan olarak modalın gizli olması için display: none değerini atamalıyız.

.modal {
  display: none; 
  position: fixed; 
  z-index: 1; 
  left: 0;
  top: 0;
  width: 100%; 
  height: 100%; 
  background-color: rgba(0,0,0,0.4); /* Yarı saydam siyah arka plan */
}

.modal-icerik {
  background-color: #fefefe;
  margin: 15% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 50%;
}

Buradaki z-index değeri, modalın diğer tüm sayfa öğelerinin üzerinde görünmesini sağlar. rgba(0,0,0,0.4) kullanımı ise arka planın hafif kararmasını sağlayarak kullanıcı odağını modala çeker.

Adım 3: JavaScript ile Etkileşim Mantığını Kurma

Html ve Css ile hazırladığımız yapıyı, kullanıcının butonlara tıklamasıyla aktif hale getirmemiz gerekir. JavaScript burada sadece display stilini block veya none yaparak görünürlüğü değiştirir.

const modal = document.getElementById("modalPencere");
const btn = document.getElementById("modalAc");
const span = document.getElementsByClassName("kapat")[0];

btn.onclick = function() {
  modal.style.display = "block";
}

span.onclick = function() {
  modal.style.display = "none";
}

window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}

Bu kod bloğu üç ana işlevi yerine getirir: Butona basınca açar, kapatma ikonuna basınca kapatır ve modalın dışındaki boş alana tıklandığında da modalı kapatarak kullanıcı deneyimini iyileştirir.

Adım 4: Modal Yöntemlerinin Karşılaştırılması

Modal oluştururken farklı yaklaşımlar mevcuttur. Aşağıdaki tablo, farklı yöntemlerin avantaj ve dezavantajlarını özetlemektedir.

Adım 5: Modern HTML5 Dialog Elementi ile Modal

2026 yılı itibarıyla, modern tarayıcılar etiketini desteklemektedir. Bu etiket, modal mantığını çok daha basit hale getirir ve erişilebilirlik özelliklerini kendiliğinden barındırır.

  
Bu modern bir dialog elementidir.
  Kapat



  const dialog = document.getElementById('modernModal');
  document.getElementById('modalAc').onclick = () => dialog.showModal();
  document.getElementById('kapatBtn').onclick = () => dialog.close();

showModal() metodu, modalı otomatik olarak en üst katmana taşır ve arka planı etkileşime kapatır. Bu, manuel z-index yönetimi yapmanıza gerek kalmadan güvenli bir modal oluşturmanızı sağlar.

Güvenlik Uyarısı: Modal pencereler üzerinden kullanıcı verisi alırken, XSS (Cross-Site Scripting) saldırılarına karşı girdi temizliği yapmayı ihmal etmeyin. Kullanıcıdan gelen verileri asla doğrudan DOM'a eklemeyin, her zaman filtreleyin.

Sıkça Sorulan Sorular

Modal pencere neden açılmıyor?

Genellikle JavaScript dosyasının HTML'e eklenmemesi veya id isimlerinin uyuşmaması kaynaklıdır. Tarayıcınızın "İncele" (Inspect) menüsünden Konsol sekmesini kontrol ederek hata mesajlarını inceleyin.

Mobilde modal boyutunu nasıl ayarlarım?

Css içerisinde @media sorgularını kullanarak modalın genişliğini (width) mobil cihazlarda %90 veya %100 olacak şekilde güncelleyebilirsiniz.

Modalın içine form koyabilir miyim?

Evet, modal içeriği standart bir HTML kapsayıcısıdır. İçerisine form, görsel veya video gibi istediğiniz her türlü elementi yerleştirebilirsiniz.

Modalı kapatmak için ESC tuşunu nasıl eklerim?

JavaScript tarafında document.addEventListener('keydown', (e) => { if(e.key === 'Escape') modal.style.display = 'none'; }); şeklinde bir dinleyici ekleyerek ESC tuşu ile kapatma özelliğini kolayca kazandırabilirsiniz.

Birden fazla modal kullanabilir miyim?

Evet, ancak her modal için benzersiz ID'ler kullanmalı ve JavaScript fonksiyonlarınızı bu ID'lere göre özelleştirmelisiniz.

Modal Pencerelerde Animasyon ve Geçiş Efektleri

Modal pencerelerin statik bir şekilde aniden ekranda belirmesi, kullanıcı deneyimi açısından bazen kaba görünebilir. CSS transition ve opacity özelliklerini kullanarak pencerelerinize yumuşak giriş ve çıkış efektleri ekleyebilirsiniz. Bu yöntem, modalın görünürlüğünü yönetirken aynı zamanda görsel bir derinlik katar.

Aşağıdaki örnekte, modalın opacity değerini 0'dan 1'e çekerek bir "fade-in" efekti oluşturuyoruz:

.modal {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s;
}

.modal.show {
  opacity: 1;
  visibility: visible;
}

JavaScript tarafında ise modalı açarken classList.add('show'), kapatırken ise classList.remove('show') komutlarını kullanarak bu animasyonu tetikleyebilirsiniz. Bu yaklaşım, sayfa akışını bozmadan daha profesyonel bir arayüz sunmanıza yardımcı olur.

Modal Erişilebilirlik (A11y) İpuçları

Web standartlarına uygun bir modal penceresi sadece görsel olarak çalışmamalı, aynı zamanda ekran okuyucular ve klavye ile gezinen kullanıcılar için de erişilebilir olmalıdır. Erişilebilir bir modal için şu kurallara dikkat etmelisiniz:

• Focus Trap (Odak Tuzağı): Kullanıcı modalı açtığında, "Tab" tuşuna bastığında odak modalın dışına çıkmamalıdır. Odak, modalın içindeki öğeler arasında dönüp durmalıdır.
• ARIA Rolleri: Modal kapsayıcınıza role="dialog" ve aria-modal="true" özniteliklerini ekleyerek tarayıcılara bunun bir diyalog penceresi olduğunu bildirin.
• Başlık Etiketleme: aria-labelledby özniteliği ile modal başlığınızı, aria-describedby ile de modal içeriğini ilişkilendirin.

Örnek bir erişilebilir HTML yapısı şu şekildedir:

  




Bildirim Başlığı
  
Bu modal, erişilebilirlik standartlarına uygun olarak yapılandırılmıştır.
  X

Bu yapı, görme engelli kullanıcıların modal penceresini doğru bir şekilde algılamasını sağlar ve klavye navigasyonunun modal içerisinde hapsolmasını garantileyerek kullanıcı deneyimini en üst seviyeye taşır.

Sonuç

Html & Css ile açılır kapanır bir modal penceresi yapmak, modern web geliştirme süreçlerinde temel bir yetkinliktir. Bu rehberde, manuel yöntemlerden modern elementine kadar farklı teknikleri adım adım inceledik. Bir sonraki adım olarak, modal pencerelerinize CSS geçişleri (transitions) ekleyerek giriş ve çıkış animasyonları ile kullanıcı deneyimini daha akıcı hale getirmeyi deneyebilirsiniz. Kodlarınızı her zaman temiz, okunabilir ve erişilebilir tutmayı unutmayın.