Kalıcı iletişim kutusu, web sayfasındaki özel bir pop-up kutusu türüdür: Kullanıcının kendine odaklanmasını engelleyen pop-up'lar. Her biri 100'den az gösterim alan iletişim kutusu açmak için geçerli bazı kullanım örnekleri vardır. yapılması gerekir. Kalıcı iletişim kutuları, kullanıcıları belirli bir içeriğe odaklanmaya ve en azından geçici bir süreliğine geri kalan kısmı için.
İletişim kutuları kalıcı (yalnızca iletişim kutusundaki içerikle etkileşim kurulabilir) veya mod dışı (yine de etkileşimde bulunmak mümkündür) olabilir. iletişim kutusunun dışındaki içeriklerle). 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 anlamsal HTML <dialog>
öğesi
anlambilimi, klavye etkileşimlerini ve HTMLDialogElement
arayüzünün tüm özellikleri ile yöntemlerini içerir.
Kalıcı iletişim kutuları
Kalıcı bir <dialog>
örneğini aşağıda bulabilirsiniz. "Kalıcı iletişim kutusunu aç" iletişim kutusunu aç düğmesini tıklayın. Açıldıktan sonra iletişim kutusunu kapatmanın üç yolu vardır: Escape tuşu,
formmethod="dialog"
düğmesini içeren bir düğme
ayarını (veya formun kendisi method="dialog"
ayarlanmışsa) ve HTMLDialogElement.close()
yöntemini kullanın.
HTMLDialogElement
, HTMLElement
kaynağından devralınan tüm yöntemlerin yanı sıra üç ana yöntem içerir.
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çılması, iletişim kutusunun kendisi dışındaki her şeyi devre dışı bırakır ve gizler. Şu durumda:
iletişim kutusunun dışında kullanıcı arayüzünün üzerine gelin. Tüm öğelerin pointer-events: none;
gibi davrandığını görürsünüz.
emin olmak İletişim kutusunu açan düğme bile etkileşimlere tepki vermiyor.
İletişim kutusu açıldığında odak, iletişim kutusuna taşınır. Odak, ilgili iletişim kutusunda sıralı klavyeyle gezinme sırasındaki ilk öğeye ayarlanır.
tab
tuşuna arka arkaya basarsanız, kalıcı iletişim kutusu seçiliyken yalnızca iletişim kutusundaki içeriğe odaklanılabileceğini
açın. İletişim kutusu açık olduğu sürece kalıcı iletişim kutusunun dışındaki her şey etkin değildir.
Bir iletişim kutusu, kalıcı olup olmamasına bakılmaksızın kapatıldığında odak, iletişim kutusunu açan öğeye döndürülür. Programatik olarak kullanıcı işlemine dayalı olmayan bir iletişim kutusu açın, yeniden değerlendirin. Gerekirse odağın, iletişim kutusu açılmadan önceki yerine geri yerleştirildiğinden emin olun. özellikle de kullanıcı, etkileşimde bulunmadan iletişim kutusunu kapatırsa.
Etkin olanlar haricindeki 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ışında her şeyi gizleyen arka plana, ::backdrop
kullanılarak stil verilebilir.
sözde öğedir. Arka plan yalnızca .showModal()
yöntemiyle bir <dialog>
görüntülendiğinde görüntülenir. Bu sözde öğe
FullScreen API kullanıldığında görüntülenen arka plan da 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()
de buna benzer şekilde arka plan eklemeden veya herhangi bir şeyin hareketsiz hale gelmesine neden olmadan bir iletişim kutusu açar.
Escape 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. Bu esnada, yakınlık diyaloğun dışındaysa odağın öğeye gideceğini fark edin
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. Odağı alabilen görünür bir düğme erişilebilirliği artırır ve en iyi uygulamaları paylaşacağız.
İ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 ayarlanmış autofocus
özelliğine sahip öğeler alınamaz
odak (sayfa, iletişim kutusu görünür olarak yüklenmediği sürece). Ancak iletişim kutusu açıldığında 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 <dialog>
içinde autofocus
dahil
bu aşama yalnızca çok dikkatli bir şekilde ele alınmalıdır. Otomatik odaklı öğeden önce gelen dizideki 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 boole open
özelliği
Mevcut olduğundan, diyaloğun etkin olduğu ve etkileşimde bulunabileceğ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.
İletişim kutusunu açmak için tercih edilen yöntem JavaScript olsa da (sayfa yüklemede open
özelliğini dahil etme), ardından kaldırma işlemini
.close()
ile yazmak, JavaScript olmadığında bile iletişim kutusunun kullanılabilir olmasını sağlamaya yardımcı olabilir.
Ek Bilgiler
tabindex
adını kullanma
İletişim kutusunu açmak için etkinleştirilen öğe ve içindeki kapat düğmesi (ve muhtemelen başka içerik)
ve etkileşimlidir. <dialog>
öğesi etkileşimli değil ve odak almıyor. tabindex
özelliğini ekleme
otomatik olarak oluşturur.
ARIA rolleri
Örtülü rol dialog
. İletişim
onay veya başka bir kullanıcı yanıtı gerektiren önemli bir mesajı bildiren 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 sunduğunu unutmayın. Firefox, Chrome ve Edge color: CanvasText;
background-color: Canvas;
olarak ayarlandı
ve Safari, kullanıcı aracısı stil sayfalarında color: black; background-color: white;
değerini ayarlıyor. color
devralındı
dialog
ile başlar ve body
veya :root
ile başlamaz (Beklenmedik olabilir). background-color
özelliği devralınmaz.
Öğrendiklerinizi sınayın
İletişim öğesi hakkındaki bilginizi test edin.
Diyaloğun arkasındaki alanı nasıl biçimlendiriyorsunuz?
::background
sözde öğesi ile.::backdrop
sözde öğesi ile.background
özelliği ile.