M.AIM.AISoloLabsUI Sözlüğü · Geri bildirim

← UI Sözlüğü

Kip pencere modal / dialog

bilinen diğer adları modal · dialog · iletişim kutusu · pop-up (yanlış ama yaygın)

Böyle diyorsan: "ortaya açılan pencere" · "arkası kararan kutu" · "emin misiniz penceresi" → bunun adı kip pencere.

Sayfayı karartıp öne çıkan, kapatılmadan devam edilemeyen pencere.

Kip pencere, arkasındaki sayfayı devre dışı bırakıp kullanıcıyı tek bir işe zorlayan penceredir. 'Kip' (modal) sözcüğü tam da bunu anlatır: arayüz geçici olarak başka bir kipe girer ve o kip kapanmadan öncekine dönülemez. Bu güçlü ama pahalı bir araçtır — kullanıcının yaptığı işi keser. Bedeli, kaçırılmasının maliyetiyle ödenmelidir: geri alınamaz bir silme onayı kip pencereyi hak eder, bir pazarlama duyurusu etmez. Teknik tarafta iyi haber şu: <dialog> elementi ve showModal() odak hapsi, arka planı devre dışı bırakma ve Escape ile kapanmayı hazır verir; bunları elle yazmak zorunda değilsin.

Kapsam: Bu madde arkasını engelleyen pencereyi kapsar. Engellemeyen, tıklayınca kapanan küçük katmanlar (açılır menü, ipucu balonu) ayrı parçalardır; sayfada duran uyarı ise Uyarı Şeridi maddesindedir.

CANLI ÖRNEK — kullan, numaralara tıkla, parçayı tanı
▸ Sil'e bas → modal; karartmaya tıkla → kapanır
Aşama aşama gezmek için okları ya da numaraları kullan.
YAPIM PROMPTU — AJANINA YAPIŞTIR
Silme onayı için modal ekle: arkada yarı saydam karartma, ortada başlık + kısa açıklama + Vazgeç/Sil butonları (Sil kırmızı, varsayılan odak Vazgeç'te). X, ESC ve karartmaya tıklama kapatsın; modal açıkken arka sayfa kaydırılamasın; kapanınca odak tetikleyen butona geri dönsün.
DEBUG PROMPTU — HUYSUZLANIRSA

Yapıştır, sonuna belirtiyi ekle — ajana klasik hata kalıplarını önden verir.

Modal'ım huysuz; şu klasikleri sırayla ele: (1) modal açıkken arka plan hâlâ kaydırılıyor (body scroll kilidi yok); (2) pencereye tıklayınca da kapanıyor / karartmaya tıklayınca kapanmıyor (olay balonlanması karışmış); (3) navbar z-index savaşını kazanıp modalın üstünde kalıyor; (4) ESC dinlenmiyor; (5) odak hapsi yok — TAB'a basınca arka sayfada geziliyor; (6) kapanınca odak kayboluyor. Belirti şu:
ANATOMİ — HER PARÇANIN ADI VAR (tıkla ya da üzerine gel → örnekte yansın)
  • 1Karartma::backdrop / scrim

    Arkadaki sayfayı karartan yarı saydam katman — 'şu an başka şeyle ilgilenemezsin' sinyali. Resmî adı scrim.

  • 2Pencere<dialog>

    Ortadaki içerik kutusu; açıkken odak içine hapsolur, arka sayfa kaydırılamaz.

  • 3Başlık + kapatma✕ / ESC

    Ne sorulduğunu söyleyen başlık ve üç kapatma yolu: X, ESC, karartmaya tıklama.

  • 4Aksiyon satırıVazgeç / Onayla

    Sağ altta; yıkıcı eylem (Sil) kırmızı ve varsayılan odak GÜVENLİ butonda olur.

DURUMLAR — HANGİ HÂLDE NE OLUR
  • AKapalı<dialog> gizli

    Sayfa normal. Pencere içeriği kapalıyken de DOM'da durabilir ama gizli olmalı; gizlenmemiş içerik ekran okuyucuya sızar.

  • BAçıkshowModal() + ::backdrop

    Arka plan karartılır ve devre dışı kalır. Arka planın kaydırılmasını da durdur; kaydırılan arka plan kullanıcıyı pencerenin kapandığını sanmaya iter.

  • COdak içerideodak tuzağı

    Tab pencerenin içinde döner, dışarı çıkmaz. Yerleşik <dialog> bunu kendiliğinden yapar; div ile yazarsan elle kurmak zorundasın.

  • DKapanıyorEscape / kapat / dışına tık

    Üç yol da beklenir. Yıkıcı işlem onayında dışına tıklamayla kapanma KAPATILIR — yanlışlıkla kapatmak kararı belirsiz bırakır.

  • EKapandıodak tetiğe döner

    Odak pencereyi açan öğeye GERİ döner. Dönmezse klavye kullanıcısı sayfanın başına savrulur; en sık atlanan kuraldır.

KODDAKİ ADLARI
HTML<dialog> + showModal()yerleşik modal, odak hapsi bedava
CSS::backdropkarartma katmanı
shadcn/uiAlertDialogonay modalı hazır parça
ERİŞİLEBİLİRLİK & SIK HATA
  • Mümkünse yerleşik <dialog> ve showModal() kullan: odak hapsi, arka planın devre dışı kalması ve Escape ile kapanma bedava gelir. Div ile yazılan modallerde bu üçü genelde eksiktir.
  • Kapanınca odağı açan öğeye geri döndür. Bu tek satırlık iş, klavye kullanıcısı için pencerenin kullanılabilir olup olmamasını belirler.
  • Pencerenin erişilebilir bir adı olsun (başlığı aria-labelledby ile bağla); adsız pencere ekran okuyucuda 'iletişim kutusu' diye açılır ve neyin sorulduğu bilinmez.
  • Arka plan kaydırmasını kilitle; kilitlemezsen kullanıcı pencerenin arkasında gezinir ve engellendiğini anlamaz.
  • Yıkıcı onaylarda dışına tıklayarak kapanmayı kapat ve varsayılan odağı GÜVENLİ butona ver — 'Sil' üstünde açılan bir pencere, Enter'a basan kullanıcıyı cezalandırır.
SIK KARIŞTIRILANLAR

Kısa bildirimden farkı. Kip pencere DURDURUR ve cevap bekler; kısa bildirim yalnız bilgi verir ve engellemez. Seçim, kaçırılmanın maliyetine göre yapılır: kullanıcı bunu görmeden devam ederse yanlış iş oluyorsa kip pencere, hiçbir şey olmuyorsa kısa bildirim. Kip pencereyi bilgi vermek için kullanmak, kapıyı kapatıp 'merhaba' demeye benzer.

Kısa bildirim sayfasına git →

Uyarı şeridinden farkı. Kip pencere kullanıcının işini KESER ve devam etmesini imkânsız kılar; uyarı şeridi sayfada durur ve kullanıcı isterse görmezden gelip devam edebilir. Aynı bilgi için ikisi arasında seçim yaparken sorulacak soru şudur: kullanıcının bunu şimdi çözmesi zorunlu mu, yoksa bilgilendirmek yeterli mi? Zorunlu değilse pencere açmak saygısızlıktır.

Uyarı şeridi sayfasına git →

KAYNAKLAR
İLGİLİ PARÇALAR

Kısa bildirim toast / snackbarUyarı şeridi alert / bannerTarih seçici date pickerAçılır menü dropdown

AYNI AİLEDE · GERI BILDIRIM