İletişim kutusu öğesi, HTML'de her türlü iletişim kutusunu temsil etmek için kullanışlı bir öğedir. Bu öğenin işleyiş şeklini öğrenin.
Kalıcı iletişim kutusu, web sayfasındaki özel bir pop-up kutusudur. Kullanıcının dikkatini kendisine çekmek için kullanıcının işini kesintiye uğratan bir pop-up'tır. İletişim kutusu göstermenin bazı geçerli kullanım alanları vardır ancak bunu yapmadan önce dikkatli olunmalıdır. Modüler iletişim kutuları, kullanıcıları belirli bir içeriğe odaklanmaya ve en azından geçici olarak sayfanın geri kalanını göz ardı etmeye zorlar.
İletişim kutuları modal (yalnızca iletişim kutusundaki içerikle etkileşim kurulabilir) veya modal olmayan (iletişim kutusunun dışındaki içerikle etkileşim kurulmaya devam edilebilir) olabilir. Modal iletişim kutuları, sayfa içeriğinin geri kalanının üzerinde gösterilir. Sayfanın geri kalanı etkin değildir ve varsayılan olarak yarı şeffaf bir arka planla gizlenir.
İletişim kutusu oluşturmak için kullanılan semantik HTML <dialog> öğesi, semantik, klavye etkileşimleri ve HTMLDialogElement arayüzünün tüm özellikleri ve yöntemleriyle birlikte gelir.
Modal iletişim kutuları
Aşağıda modal <dialog> örneği verilmiştir. "Kalıcı iletişim kutusunu aç" düğmesiyle iletişim kutusunu açın. Açıldıktan sonra iletişim kutusunu kapatmanın üç yolu vardır: Esc tuşu, formmethod="dialog" ayarlanmış bir düğme içeren bir form gönderme (veya formun kendisinde method="dialog" ayarlanmışsa) ve HTMLDialogElement.close() yöntemi.
HTMLDialogElement, HTMLElement sınıfından devralınan tüm yöntemlerle birlikte üç ana yönteme sahiptir.
dialog.show() /* opens the dialog */
dialog.showModal() /* opens the dialog as a modal */
dialog.close() /* closes the dialog */
Bu <dialog>, HTMLDialogElement.showModal() yöntemi aracılığıyla açıldığı için modal bir iletişim kutusudur. Kalıcı bir iletişim kutusu açıldığında, iletişim kutusu dışındaki her şey devre dışı bırakılır ve gizlenir. Fareyle iletişim kutusunun dışındaki kullanıcı arayüzünün üzerine geldiğinizde tüm öğelerin pointer-events: none; ayarlanmış gibi davrandığını görürsünüz. İletişim kutusunu açan düğme bile etkileşimlere tepki vermez.
İletişim kutusu açıldığında odak iletişim kutusuna geçer. Odak, ilgili iletişim kutusundaki sıralı klavye gezinme sırasının ilk öğesine ayarlanır.
tab tuşuna art arda basarsanız modal iletişim kutusu açıkken yalnızca iletişim kutusundaki içeriğin odağa alınabileceğini görürsünüz. Kalıcı iletişim kutusu açık olduğu sürece iletişim kutusunun dışındaki her şey etkin değildir.
Modal olsun veya olmasın, bir iletişim kutusu kapatıldığında odak, iletişim kutusunu açan öğeye geri döner. Kullanıcı işlemine dayalı olmayan bir iletişim kutusunu programatik olarak açıyorsanız bu işlemi yeniden değerlendirin. Gerekirse, özellikle kullanıcı iletişim kutusuyla etkileşime geçmeden iletişim kutusunu kapatırsa odağın iletişim kutusu açılmadan önceki konumuna geri getirildiğinden emin olun.
Etkin iletişim kutuları dışında bir öğeyi ve tüm alt öğelerini devre dışı bırakmak için kullanılabilecek global bir inert özelliği vardır. showModal() kullanılarak modal iletişim kutusu açıldığında, etkin olmama veya devre dışı bırakma özelliği ücretsiz olarak sunulur; özellik açıkça ayarlanmaz.
İletişim kutusu dışındaki her şeyi gizleyen arka plan, ::backdrop sözde öğesi kullanılarak biçimlendirilebilir. Arka plan yalnızca .showModal() yöntemiyle bir <dialog> gösterildiğinde gösterilir. Bu sözde öğe, Tam Ekran API'si kullanıldığında gösterilen arka planlar da dahil olmak üzere tüm arka planlarla eşleşir (ör. ekran veya monitörle aynı en boy oranına sahip olmayan bir videoyu tam ekran modunda görüntülerken).
Mod olmayan iletişim kutuları
HTMLDialogElement.show() da benzer şekilde bir iletişim kutusu açar ancak arka plan eklemez veya herhangi bir öğenin etkin olmamasına neden olmaz.
Çıkış tuşu, kalıcı olmayan iletişim kutularını kapatmaz. Bu nedenle, modal olmayan iletişim kutusunu kapatma yöntemi eklemeniz daha da önemlidir. Bunu yaparken, kapatıcı iletişim kutusunun dışındaysa odağın iletişim kutusunu açan öğeye gideceğini unutmayın. Bu, en iyi kullanıcı deneyimi olmayabilir.
İletişim kutusunu kapatmak için bir düğme, spesifikasyon tarafından resmi olarak zorunlu tutulmasa da gerekli olarak kabul edilmelidir. Çıkış tuşu, kalıcı iletişim kutusunu kapatır ancak kalıcı olmayan iletişim kutusunu kapatmaz. Odak alabilen görünür bir düğme, erişilebilirliği ve kullanıcı deneyimini iyileştirir.
İletişim kutusunu kapatma
Bir iletişim kutusunu kapatmak için HTMLDialogElement.close() yöntemine ihtiyacınız yoktur. JavaScript'e hiç ihtiyacınız yoktur. <dialog>'yi JavaScript olmadan kapatmak için <form> üzerinde method="dialog" veya düğmede formmethod="dialog" ayarlayarak iletişim yöntemi içeren bir form ekleyin.
Kullanıcı dialog yöntemiyle gönderim yaptığında, kullanıcı tarafından girilen verilerin durumu korunur. Gönderme etkinliği olduğunda (novalidate ayarlanmadığı sürece) form kısıtlama doğrulamasından geçer. Bu durumda kullanıcı verileri temizlenmez veya gönderilmez.
JavaScript içermeyen bir kapat düğmesi şu şekilde yazılabilir:
<dialog open>
<form method="dialog">
<button type="submit" autofocus>close</button>
</form>
</dialog>
Bu örnekte, kapat simgesinde <button> autofocus özelliğinin ayarlandığını fark etmiş olabilirsiniz. <dialog> içinde autofocus özelliği ayarlanmış öğeler, sayfa yüklendiğinde (sayfa iletişim kutusu görünür şekilde yüklenmediği sürece) odaklanmaz. Ancak iletişim kutusu açıldığında bu öğelere odaklanılır.
Varsayılan olarak, bir iletişim kutusu açıldığında iletişim kutusundaki ilk odaklanılabilir öğe, iletişim kutusundaki farklı bir öğede autofocus özelliği ayarlanmadığı sürece odağı alır. Kapat düğmesinde autofocus özelliğini ayarlamak, iletişim kutusu açıldığında düğmenin odağa alınmasını sağlar. Ancak autofocus öğesini <dialog> içine dahil ederken çok dikkatli olun. Otomatik odaklanan öğeden önce gelen tüm öğeler atlanır.
Bu özelliği odak dersinde daha ayrıntılı olarak ele alıyoruz.
HTMLDialogElement arayüzünde bir returnValue özelliği bulunur. Bir formu method="dialog" ile gönderdiğinizde returnValue, formu göndermek için kullanılan gönder düğmesinin name değerine (varsa) ayarlanır. <button type="submit" name="toasty">close</button> yazmış olsaydık returnValue toasty olurdu.
Bir iletişim kutusu açıldığında doğru/yanlış open özelliği bulunur. Bu, iletişim kutusunun etkin olduğu ve onunla etkileşim kurulabileceği anlamına gelir. Bir iletişim kutusu, .show() veya .showModal() aracılığıyla değil de open özelliği eklenerek açıldığında iletişim kutusu modsuz olur. HTMLDialogElement.open
mülkü, modal olup olmadığına değil, iletişim kutusunun etkileşime açık olup olmadığına bağlı olarak true veya false değerini döndürür.
JavaScript, iletişim kutusunu açma yöntemi olarak tercih edilse de sayfa yüklenirken open özelliğini ekleyip ardından .close() ile kaldırarak JavaScript olmadığında bile iletişim kutusunun kullanılabilir olmasını sağlayabilirsiniz.
Ek Bilgiler
tabindex kullanmayın
İletişim kutusunu açmak için etkinleştirilen öğe ve bu öğenin içerdiği kapat düğmesi (ve muhtemelen diğer içerikler) odağa alınabilir ve etkileşimlidir. <dialog> öğesi etkileşimli değildir ve odaklanmaz. tabindex özelliğini iletişim kutusuna eklemeyin.
ARIA rolleri
Örtük rol dialog'dir. İletişim kutusu, onay veya başka bir kullanıcı yanıtı gerektiren önemli bir mesajı ileten bir onay penceresiyse role="alertdialog" değerini ayarlayın.
İletişim kutusunun erişilebilir bir adı da olmalıdır. Görünür metin erişilebilir adı sağlayabiliyorsa aria-labelledby="idOfLabelingText" ekleyin.
CSS varsayılanları
Tarayıcıların dialog için varsayılan stil sağladığını unutmayın. Firefox, Chrome ve Edge, kullanıcı aracısı stil sayfalarında color: CanvasText; background-color: Canvas;, Safari ise color: black; background-color: white; değerini ayarlar. color, beklenmedik bir şekilde body veya :root yerine dialog'ten devralınır. background-color özelliği devralınmıyor.
Öğrendiklerinizi test etme
İletişim öğesi hakkındaki bilginizi test edin.
İletişim kutusunun arkasındaki alana nasıl stil uygularsınız?
::background sözde öğesiyle.::backdrop sözde öğesiyle.background mülkü ile.