İ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. Modal 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. Kalıcı iletişim kutuları, sayfa içeriğinin geri kalanının üzerinde görüntülenir. Geri kalan inert ve varsayılan olarak yarı saydam bir arka planla gizlendi.
İ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.
Kalıcı iletişim kutuları
Kalıcı bir <dialog>
örneğini aşağıda bulabilirsiniz. "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
kaynağından 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()
üzerinden açıldığı için
yöntemi, kalıcı bir iletişim kutusudur. Kalıcı bir iletişim kutusu açmak, iletişim kutusunun kendisi dışındaki her şeyi devre dışı bırakır ve gizler. 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 taşınır. Odak, ilgili iletişim kutusundaki sıralı klavye gezinme sırasının ilk öğesine ayarlanır.
tab
tuşuna arka arkaya basarsanız, kalıcı iletişim kutusu açıkken yalnızca iletişim kutusundaki içeriğe odaklanılabileceğini
açın. 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. Programatik olarak kullanıcı işlemine dayalı olmayan bir iletişim kutusu açın, 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 olanlar dışındaki bir öğeyi ve tüm alt öğelerini devre dışı bırakmak için kullanılabilecek genel bir inert
özelliği vardır.
iletişim kutusu. showModal()
kullanılarak kalıcı iletişim kutusu açıldığında eylemsizlik veya devre dışı bırakma ücretsiz olarak sunulur; özellik
açıkça belirtilmediğinden emin olun.
İ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).
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 etkin olmamasına neden olmaz.
Çıkış tuşu, kalıcı olmayan iletişim kutularını kapatmaz. Bu nedenle, dönüşüm hunisinin üst kısmındaki
iletişim kutusunu kapatmayın. 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 kapatma düğmesi, spesifikasyon tarafından resmi olarak gerekli olmasa da bunu gerekli olarak düşünebilirsiniz. Escape 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
İletişim kutusunu kapatmak için HTMLDialogElement.close()
yöntemine ihtiyacınız yoktur. JavaScript'e hiç ihtiyacınız yok. <dialog>
uygulamasını kapatmak için
JavaScript olmadan, <form>
veya formmethod="dialog"
üzerinde method="dialog"
ayarlayarak iletişim yöntemi içeren bir form ekleyin
ekleyebilirsiniz.
Bir kullanıcı, dialog
yöntemini kullanarak gönderim yaptığında, kullanıcı tarafından girilen verilerin durumu korunur. Bir gönderme etkinliği olduğunda
form, kısıtlama doğrulamasından geçer (novalidate
ayarlanmadığı sürece) - 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>
autofocus
özelliğini fark etmiş olabilirsiniz.
bu örnekte <button>
kapanışında ayarlanır. <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 öğeye farklı bir
öğesinin değeri autofocus
olarak ayarlanmıştır. Kapat düğmesinde autofocus
özelliğini ayarlamak,
iletişim kutusu açıldığında odak alır. Ancak autofocus
öğesini <dialog>
içine dahil ederken çok dikkatli olun. Otomatik odaklanan öğeden önce gelen tüm öğeler atlanır.
Bu özelliği, odaklanılan derste daha ayrıntılı olarak ele alacağız.
HTMLDialogElement
arayüzü bir returnValue
içerir
method="dialog"
içeren bir form gönderildiğinde, returnValue
özelliği, aşağıdaki işlem için kullanılan gönder düğmesinin name
değeri (varsa) olarak ayarlanır:
formu gönderin. <button type="submit" name="toasty">close</button>
yazsaydık returnValue
toasty
olurdu.
Bir iletişim kutusu açıldığında doğru/yanlış open
özelliği mevcuttur. Bu, iletişim kutusunun etkin olduğu ve onunla etkileşim kurulabileceği anlamına gelir. Bir iletişim kutusu, open
özelliği eklenerek açıldığında
.show()
veya .showModal()
aracılığıyla yapılana göre iletişim kutusu kalıcı olacak. HTMLDialogElement.open
özelliği, iletişim kutusunun etkileşim için uygun 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
adını kullanma
İ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ülü rol dialog
. İ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ğlıyorsa 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 belirler. color
devralındı
dialog
ile başlar ve body
veya :root
ile başlamaz (Beklenmedik olabilir). background-color
özelliği devralınmaz.
Öğrendiklerinizi test etme
İletişim öğesi hakkındaki bilgilerinizi test edin.
İletişim kutusunun arkasındaki alana nasıl stil uygulayabilirim?
background
özelliği ile.::background
sözde öğesiyle.::backdrop
sözde öğesi ile.