Dialog

İ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.