Modal ve İletişim Kutusu Stillendirme

HTML <dialog> öğesi yerleşik kipli davranış sağlar: odağı sınırlama, Escape tuşuyla kapatma ve showModal() / close() API'si. Özel bir kipli pencere altyapısını sıfırdan oluşturmak yerine öğeyi CSS ile biçimlendirin.

::backdrop sözde öğesi, açık bir <dialog> arkasındaki kaplamayı biçimlendirir. Yarı saydam bir arka plan uygulayın: dialog::backdrop { background: rgba(0,0,0,0.5); backdrop-filter: blur(4px); }. Bir sarmalayıcı div gerekmez.

İletişim kutularını CSS ile ortalayın: dialog { margin: auto; max-width: min(90vw, 640px); max-height: 90vh; overflow-y: auto; }. Bir iletişim kutusunda margin: auto kullanmak, JS ile konumlandırmaya gerek kalmadan iletişim kutusunu görünüm alanının ortasına yerleştirir.

Uzun içeriği yönetmek için iletişim kutusunun kendisinde overflow-y: auto ayarlayın. Arka planın kaydırılmasını önlemek için kipli pencere açıldığında body üzerinde overflow: hidden ayarlayın; bunu açıp kapatmak için JavaScript ile bir sınıf ekleyip kaldırın.

JavaScript olmadan yalnızca CSS ile giriş animasyonları oluşturmak için @starting-style (Chrome 117+) kullanarak iletişim kutusunun girişini canlandırın. Daha geniş destek için JavaScript ile bir açık sınıfı ekleyin ve dönüşüm ile saydamlıkta geçiş kullanın: translateY(20px) değerinden translateY(0) değerine yukarı kayma.

İletişim kutusunun kapanmasını canlandırmak zordur; close() çağrıldığında iletişim kutusu hemen gizlenir. Çözümler şunlardır: kapatma animasyonlarını yerel olarak destekleyen açılır pencere API'sini kullanmak veya kapatmayı JavaScript ile yakalayıp çıkış animasyonu sınıfını oynatmak ve animasyon sona erdikten sonra close() çağırmak.

İletişim kutuları diğer tüm sayfa içeriğinin üzerinde açılır. z-index çatışmalarından kaçınmak için iletişim kutusu öğesinin yerel yığınlama bağlamını kullanın; öğe, kendisinde z-index ayarı gerektirmeden tüm CSS z-index değerlerinin üzerinde, üst katmanda görüntülenir.

Mobilde iletişim kutularını bir sayfa gibi alttan yukarı kaydırın: dialog { margin: auto auto 0; width: 100%; border-radius: 16px 16px 0 0; max-height: 90vh; }. Masaüstünde bunları margin: auto yaklaşımıyla geleneksel bir kipli pencere olarak ortalayın.

Yerel iletişim kutusu öğesi, açıldığında odağı otomatik olarak içindeki ilk odaklanabilir öğeye taşır. İletişim kutusunda mantıklı bir sekme sırası oluşturduğunuzdan emin olun. Uygun klavye gezinme akışı için, iletişim kutusu kapatıldığında odağı tetikleyici öğeye geri döndüren bir kapatma düğmesi ekleyin.

İletişim kutusunun başlığına işaret eden aria-labelledby ve açıklamasına işaret eden aria-describedby ekleyin. <dialog> için iletişim kutusu rolü örtüktür. Ekran okuyucular, odak iletişim kutusuna girdiğinde bu etiketleri duyurur.

Onay iletişim kutularında şunlar bulunmalıdır: açık bir soru başlığı, kısa bir etki açıklaması, yıkıcı bir işlem düğmesi (kırmızı, sağa hizalı) ve iptal düğmesi (sola hizalı veya ikincil). Güvenli seçeneği varsayılan klavye etkileşimi yapmak için iptal düğmesinde autofocus kullanın.

Özel div tabanlı bir kipli pencere yerine yerel <dialog> öğesini kullanmanın avantajı nedir?

::backdrop, margin: auto ile ortalama, taşma denetimi, giriş için CSS animasyonları ve odak yönetimiyle birlikte yerel iletişim kutusu öğesi, tamamen erişilebilir ve CSS tarafından yönlendirilen bir kipli pencere deseni sağlar. Mobilde duyarlı sayfa düzenleri ve doğru ARIA öznitelikleri, üretime hazır iletişim kutusu bileşenini tamamlar.