İletişim Kutusu

İletişim kutusu öğesi, HTML'de her türlü iletişim kutusunu temsil etmek için kullanılan faydalı bir öğedir. Nasıl çalıştığını öğrenin.

Kalıcı iletişim kutusu, web sayfasındaki özel bir pop-up kutu türüdür ve kullanıcının dikkatini kendisine çekmek için etkileşimi kesintiye uğratır. İletişim kutusu açmak için geçerli bazı kullanım alanları olsa da bunu yapmadan önce dikkatli bir şekilde düşünmek gerekir. Modal iletişim kutuları, kullanıcıları belirli bir içeriğe odaklanmaya zorlar ve en azından geçici olarak sayfanın geri kalanını görmezden gelmelerine neden olur.

İletişim kutuları modal (yalnızca iletişim kutusundaki içerikle etkileşime geçilebilir) veya modal olmayan (iletişim kutusunun dışındaki içerikle etkileşime geçmek mümkündür) olabilir. Modal iletişim kutuları, sayfa içeriğinin geri kalanının üzerinde gösterilir. Sayfanın geri kalanı etkisizdir ve varsayılan olarak yarı şeffaf bir arka planla gizlenir.

Bir iletiş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 bir modal <dialog> örneği verilmiştir. "Open modal dialog" (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: Escape tuşu, formmethod="dialog" ayarlanmış bir düğmeyle form gönderme (veya formun kendisinde method="dialog" ayarlanmışsa) ve HTMLDialogElement.close() yöntemi.

HTMLDialogElement, HTMLElement öğesinden devralınan tüm yöntemlerin yanı sıra üç 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öntemiyle açıldığı için modal iletişim kutusudur. Kalıcı iletişim kutusu açıldığında iletişim kutusu dışındaki her şey devre dışı bırakılır ve görünmez hale gelir. İletişim kutusunun dışındaki kullanıcı arayüzünün üzerine geldiğinizde, tüm öğelerin pointer-events: none; ayarlanmış gibi davrandığını fark edersiniz. İ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, bu iletişim kutusundaki sıralı klavye gezinme düzeninde ilk öğeye ayarlanır. tab tuşuna art arda basarsanız modal iletişim kutusu açıkken yalnızca iletişim kutusundaki içerik odaklanabilir. İletişim kutusu açık olduğu sürece, iletişim kutusunun dışındaki her şey etkisizdir.

Bir iletişim kutusu kapatıldığında (modal olsun veya olmasın) odak, iletişim kutusunu açan öğeye geri döner. Kullanıcı işlemi olmadan iletişim kutusunu programatik olarak açmaktan kaçının. Gerekirse, özellikle kullanıcı iletişim kutusunu etkileşimde bulunmadan kapatırsa odağın iletişim kutusu açılmadan önceki yerine geri döndüğünden emin olun.

Bir öğeyi ve tüm alt öğelerini (etkin olanlar hariç) devre dışı bırakmak için kullanılabilecek genel bir inert özelliği vardır. showModal() kullanılarak bir modal iletişim kutusu açıldığında, inertlik veya devre dışı bırakma özelliği de beraberinde gelir. Bu özellik açıkça ayarlanmaz.

İletişim kutusu dışındaki her şeyi kapatan arka plan, ::backdrop sözde öğesi kullanılarak stillendirilebilir. Arka plan yalnızca <dialog>, .showModal() yöntemiyle görüntülendiğinde gösterilir. Bu sözde öğe, FullScreen API kullanılırken görüntülenen de dahil olmak üzere tüm arka planlarla eşleşir. Örneğin, ekran veya monitörle aynı en-boy oranına sahip olmayan bir videoyu tam ekran modunda izlerken.

Kalıcı olmayan iletişim kutuları

HTMLDialogElement.show() da benzer şekilde bir iletişim kutusu açar ancak arka plan eklemez veya herhangi bir öğenin etkisiz hale gelmesine neden olmaz. Çıkış tuşu, kalıcı olmayan iletişim kutularını kapatmaz. Bu nedenle, kalıcı olmayan iletişim kutusunu kapatma yöntemini eklemek daha da önemlidir. Bu durumda, kapatma düğmesi 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 kapatma düğmesi, spesifikasyon tarafından resmi olarak zorunlu kılınmasa da zorunlu olarak kabul edilir. Çıkış tuşu, kalıcı iletişim kutusunu kapatır ancak kalıcı olmayan iletişim kutusunu kapatmaz. Odaklanabilen 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öntemini kullanmanız gerekmez. JavaScript'e hiç ihtiyacınız yoktur. <dialog> JavaScript olmadan kapatmak için <form> üzerinde method="dialog" veya düğmede formmethod="dialog" ayarlayarak iletişim kutusu 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 olsa da (form, novalidate ayarlanmadığı sürece kısıtlama doğrulamasından geçer) kullanıcı verileri ne temizlenir ne de gönderilir. JavaScript olmadan kapat düğmesi şu şekilde yazılabilir:

<dialog open>
  <form method="dialog">
    <button type="submit" autofocus>close</button>
  </form>
</dialog>

Bu örnekte, kapatma düğmesinde autofocus özelliğinin ayarlandığını fark etmiş olabilirsiniz.<button> <dialog> içinde autofocus özelliği ayarlanmış öğeler, sayfa yüklendiğinde odaklanmaz (sayfa, iletişim kutusu görünür şekilde yüklenmediği sürece). Ancak iletişim kutusu açıldığında odak bu düğmelere geçer.

Varsayılan olarak, bir iletişim kutusu açıldığında iletişim kutusundaki farklı bir öğede autofocus özelliği ayarlanmadığı sürece iletişim kutusundaki odaklanılabilir ilk öğe odağı alır. Kapatma düğmesinde autofocus özelliğinin ayarlanması, iletişim kutusu açıldığında düğmenin odaklanmasını sağlar. Ancak autofocus öğesinin <dialog> içine dahil edilmesi çok dikkatli bir şekilde yapılmalıdır. Sıradaki, otomatik odaklanılan öğeden önceki tüm öğeler atlanır. Bu özelliği odaklanma dersinde daha ayrıntılı olarak ele alıyoruz.

HTMLDialogElement arayüzü, returnValue özelliğini içerir. method="dialog" içeren bir form göndermek, formu göndermek için kullanılan gönder düğmesinin name'sini (varsa) returnValue olarak ayarlar. <button type="submit" name="toasty">close</button> yazsaydık returnValue, toasty olurdu.

Bir iletişim kutusu açıldığında open boolean özelliği bulunur. Bu, iletişim kutusunun etkin olduğu ve etkileşimde bulunulabileceği anlamına gelir. Bir iletişim kutusu .show() veya .showModal() ile değil, open özelliği eklenerek açıldığında iletişim kutusu modsuz olur. HTMLDialogElement.open özelliği, iletişim kutusunun etkileşime açık olup olmamasına bağlı olarak true veya false değerini döndürür. Bu, iletişim kutusunun modal olup olmamasıyla ilgili değildir.

Bir iletişim kutusunu açmak için tercih edilen yöntem JavaScript olsa da sayfa yüklenirken open özelliğini eklemek ve ardından .close() ile kaldırmak, JavaScript'in kullanılamadığı durumlarda bile iletişim kutusunun kullanılabilir olmasını sağlayabilir.

Ek bilgiler

tabindex kullanmayın

İletişim kutusunu açmak için etkinleştirilen öğe ve iletişim kutusunda bulunan kapatma düğmesi (ve muhtemelen diğer içerikler) odaklanabilir ve etkileşimli olabilir. <dialog> öğesi etkileşimli değil ve odaklanmıyor. tabindex özelliğini iletişim kutusuna eklemeyin.

ARIA rolleri

Örtülü 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" olarak ayarlayın. İletişim kutusunun erişilebilir bir adı da olmalıdır. Görünür metin, erişilebilir ad için yeterliyse 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, body veya :root'den değil, dialog'den devralınır. Bu durum beklenmedik olabilir. background-color özelliği devralınmaz.

Anlayıp anlamadığınızı kontrol etme

İletişim kutusu öğesiyle ilgili bilginizi test edin.