Konu başlangıcı
Çoğu sitede basit bir popup ya da modal açmak için hâlâ ya harici kütüphane kuruluyor ya da position: fixed, arkaya karartma div'i ve z-index savaşlarıyla uğraşılıyor. Üstüne bir de "ESC'ye basınca kapansın, arkadaki sayfa kaymasın, Tab'a basınca focus modalın dışına taşmasın" diye onlarca satır JavaScript hamallığı çekiliyor.
Halbuki HTML'in kendi <dialog> etiketi bunların tamamını sıfır eforla, native olarak çözüyor.
Mantık çok temiz:
Açıp kapatmak için gereken tek JavaScript kodu şu kadar:
Burada kritik nokta show() yerine showModal() kullanmak. Çünkü showModal() çağrıldığı an:
Top Layer (En Üst Katman): Tarayıcı modalı DOM sırasından bağımsız olarak en üst katmana atıyor. Projenin hiçbir yerinde z-index tanımlamanıza gerek kalmıyor, hiçbir öğe modalın üstüne çıkamıyor.
Focus Trap & ESC Desteği: Klavyeden Escape tuşuna basıldığı an kendiliğinden kapanıyor. Kullanıcı Tab ile form elemanları arasında gezerken odak modal dışına kaçmıyor (erişilebilirlik doğrudan çözülüyor).
Backdrop Div'ine Gerek Yok: Arka planı karartmak için ekstra HTML div'i eklemiyorsunuz. CSS'te doğrudan kendi sahte sınıfı (pseudo-element) var:
Eski usul "overlay div aç, fixed position ver, body'e overflow: hidden bas" çilesini çöpe atıp projede bunu kullanınca hem HTML tarafı tertemiz kalıyor hem de en az 40-50 satır gereksiz JS silinmiş oluyor. Tarayıcı desteği de neredeyse tüm tarayıcılarda %98 seviyelerinde, doğrudan kullanılabilir durumda.
Halbuki HTML'in kendi <dialog> etiketi bunların tamamını sıfır eforla, native olarak çözüyor.
Mantık çok temiz:
<dialog id="uyariModal"> <h2>İşlem Başarılı</h2> <p>Değişiklikler kaydedildi. ESC tuşuna basarak da çıkabilirsiniz.</p> <button id="kapatBtn">Tamam</button></dialog><button id="acBtn">Modalı Aç</button>Açıp kapatmak için gereken tek JavaScript kodu şu kadar:
const modal = document.getElementById('uyariModal');document.getElementById('acBtn').onclick = () => modal.showModal();document.getElementById('kapatBtn').onclick = () => modal.close();Burada kritik nokta show() yerine showModal() kullanmak. Çünkü showModal() çağrıldığı an:
Top Layer (En Üst Katman): Tarayıcı modalı DOM sırasından bağımsız olarak en üst katmana atıyor. Projenin hiçbir yerinde z-index tanımlamanıza gerek kalmıyor, hiçbir öğe modalın üstüne çıkamıyor.
Focus Trap & ESC Desteği: Klavyeden Escape tuşuna basıldığı an kendiliğinden kapanıyor. Kullanıcı Tab ile form elemanları arasında gezerken odak modal dışına kaçmıyor (erişilebilirlik doğrudan çözülüyor).
Backdrop Div'ine Gerek Yok: Arka planı karartmak için ekstra HTML div'i eklemiyorsunuz. CSS'te doğrudan kendi sahte sınıfı (pseudo-element) var:
dialog::backdrop { background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(3px);}dialog { border: none; border-radius: 8px; padding: 24px;}Eski usul "overlay div aç, fixed position ver, body'e overflow: hidden bas" çilesini çöpe atıp projede bunu kullanınca hem HTML tarafı tertemiz kalıyor hem de en az 40-50 satır gereksiz JS silinmiş oluyor. Tarayıcı desteği de neredeyse tüm tarayıcılarda %98 seviyelerinde, doğrudan kullanılabilir durumda.