Dialog

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.