Kalıcı iletişim kutusu, bir web sayfasında bulunan özel bir pop-up kutusu türüdür: kullanıcının kendisine odaklanmasını engelleyen bir pop-up. İletişim kutusu oluşturmak için bazı geçerli kullanım alanları vardır, ancak bunu yapmadan önce dikkat edilmesi gereken çok nokta vardır. Kalıcı iletişim kutuları, kullanıcıları belirli içeriğe odaklanmaya zorlar ve en azından geçici olarak sayfanın geri kalanını göz ardı eder.
İletişim kutuları kalıcı (yalnızca iletişim kutusundaki içerikle etkileşim kurulabilir) veya modal (iletişim kutusu dışındaki içeriklerle etkileşime geçmek mümkündür) olabilir. Kalıcı iletişim kutuları sayfa içeriğinin geri kalanının üstünde görüntülenir. Sayfanın geri kalanı inert olarak görünür ve varsayılan olarak yarı şeffaf bir arka plan ile gizlenir.
İletişim kutusu oluşturmak için kullanılan anlamsal HTML <dialog> öğesi; anlamlar, klavye etkileşimleri ve HTMLDialogElement arayüzünün tüm özellikleri ile yöntemleriyle gelir.
Kalıcı iletişim kutuları
Aşağıda, kalıcı <dialog> örneği verilmiştir. "Kalıcı iletişim kutusunu aç" düğmesi olan iletişim kutusunu açın. İletişim kutusunu açtıktan sonra kapatmanın üç yolu vardır: Escape tuşu, formmethod="dialog" ayarı olan bir düğmeyle form gönderme (veya formda method="dialog" seçeneği belirlenmişse) ve HTMLDialogElement.close() yöntemi.
HTMLDialogElement üç temel yönteme ve HTMLElement'dan devralınan tüm yöntemlere sahiptir.
dialog.show() /* opens the dialog */
dialog.showModal() /* opens the dialog as a modal */
dialog.close() /* closes the dialog */
Bu <dialog>, HTMLDialogElement.showModal() yöntemi ile açıldığı için kalıcı bir iletişim kutusudur. Kalıcı iletişim kutusunun açılması, iletişim kutusunun kendisi dışındaki her şeyi devre dışı bırakır ve belirsizleştirir. İletişim kutusunun dışında 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 yanıt vermez.
İ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 art arda basarsanız kalıcı iletişim kutusu açıkken yalnızca iletişim kutusundaki içeriğe odaklanılabilir. İletişim kutusu açık olduğu sürece kalıcı iletişim kutusunun dışındaki her şey durağandır.
Kalıcı veya kalıcı olmayan bir iletişim kutusu kapatıldığında odak, iletişim kutusunu açan öğeye döndürülür. Kullanıcı işlemine dayalı olmayan bir iletişim kutusunu programatik olarak açarsanız tekrar düşünün. Gerekirse odağın, özellikle kullanıcı etkileşimde bulunmadan iletişim kutusunu kapatırsa açılan iletişim kutusu açılmadan önceki yere geri verildiğinden emin olun.
Etkin iletişim kutuları dışındaki bir öğeyi ve tüm alt öğelerini devre dışı bırakmak için kullanılabilecek genel bir inert özelliği vardır. showModal() kullanılarak kalıcı bir iletişim kutusu açıldığında eylemsizlik veya devre dışı bırakma özellikleri ücretsiz olarak sunulur; özellik açıkça ayarlanmamıştır.
İletişim kutusu dışındaki her şeyi gizleyen arka planın stili, ::backdrop sözde öğesi kullanılarak ayarlanabilir. Arka plan, yalnızca .showModal() yöntemiyle <dialog> gösterildiğinde görüntülenir. Bu sözde öğe, FullScreen API kullanıldığında (ör. bir videoyu ekran veya monitörle aynı en boy oranına sahip olmayan tam ekran modunda izlerken) gösterilen arka plan da dahil olmak üzere tüm arka planlarla eşleşir.
Kalıcı iletişim kutuları
HTMLDialogElement.show() de benzer şekilde bir iletişim kutusu açar, ancak arka plan eklemeden veya herhangi bir şeyin durağanlaşmasına neden olmaz.
Escape tuşu, modal olmayan iletişim kutularını kapatmaz. Bu nedenle, modal olmayan iletişim kutusunu kapatma yöntemi eklediğinizden emin olmanız daha da önemlidir. Bunu yaparken, diyalogun dışında kalan kısımlarda, odak noktasının iletişim kutusunu açan öğeye odaklanacağını fark edin. Bu öğe, en iyi kullanıcı deneyimi olmayabilir.
İletişim kutusunu kapatma düğmesi spesifikasyon tarafından resmi olarak zorunlu kılınmasa da bunu gerekli olarak düşünebilirsiniz. Escape tuşu kalıcı iletişim kutusunu kapatır ancak modal 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
İletişim kutusunu kapatmak için HTMLDialogElement.close() yöntemine ihtiyacınız yoktur. JavaScript'e hiç ihtiyacınız yoktur. <dialog> öğesini JavaScript olmadan kapatmak için <form> üzerinde method="dialog" veya düğme üzerinde formmethod="dialog" ayarlarını yaparak iletişim yöntemi içeren bir form ekleyin.
Bir kullanıcı dialog yöntemiyle gönderim yaptığında, kullanıcı tarafından girilen verilerin durumu korunur. Gönderme etkinliği varken (novalidate ayarlanmadığı sürece form, kısıtlama doğrulamasından geçer) kullanıcı verileri silinmez veya gönderilmez.
JavaScript'siz bir kapat düğmesi şu şekilde yazılabilir:
<dialog open>
<form method="dialog">
<button type="submit" autofocus>close</button>
</form>
</dialog>
Bu örnekte, <button> kapanışında autofocus özelliğinin ayarlandığını fark etmiş olabilirsiniz. Bir <dialog> içinde ayarlanmış autofocus özelliğine sahip öğeler, sayfa yüklenirken odak almayacak (sayfa görünür iletişim kutusuyla yüklenmediği sürece). Ancak iletişim kutusu açıldığında odaklanır.
Varsayılan olarak, bir iletişim kutusu açıldığında iletişim kutusundaki farklı bir öğe autofocus özelliği ayarlanmamışsa iletişim kutusundaki ilk odaklanılabilir öğeye odaklanılır. Kapat düğmesinde autofocus özelliğinin ayarlanması, iletişim kutusu açıldığında odağın almasını sağlar. Ancak, <dialog> içinde autofocus dahil olmak üzere yalnızca çok dikkatli bir şekilde yapılmalıdır. Dizide, otomatik odaklanmış öğeden önce gelen tüm öğeler atlanır.
Bu özelliği, odak noktası dersinde daha ayrıntılı olarak ele alacağız.
HTMLDialogElement arayüzü bir returnValue özelliği içerir. Bir formu method="dialog" ile gönderdiğinizde returnValue, formu göndermek için kullanılan gönder düğmesinden (varsa) name değerine ayarlanır. <button type="submit" name="toasty">close</button> yazmış olsaydık returnValue toasty olurdu.
Bir iletişim kutusu açıldığında boole open özelliği mevcuttur. Bu, iletişim kutusunun etkin olduğu ve etkileşim kurulabileceği anlamına gelir. .show() veya .showModal() yerine open özelliği eklenerek bir iletişim kutusu açıldığında iletişim kutusu kalıcı olur. HTMLDialogElement.open özelliği, iletişim kutusunun etkileşim için kullanılabilir olup olmamasına bağlı olarak true veya false değerini döndürür (kalıcı olup olmamasına değil).
İletişim kutusu açmak için tercih edilen yöntem JavaScript olsa da, sayfa yüklenirken open özelliğini dahil edip daha sonra bunu .close() ile kaldırmak, iletişim kutusunun JavaScript kullanılamadığında bile kullanılabilir durumda olmasına yardımcı olabilir.
Ek Bilgiler
tabindex kullanma
İletişim kutusunu açmak için etkinleştirilen öğe ve içerdiği kapat düğmesi (ve muhtemelen başka içerik) odağı alabilir ve etkileşimlidir. <dialog> öğesi etkileşimli değil ve odaklanmaz. tabindex özelliğini iletişim kutusunun kendisine eklemeyin.
ARIA rolleri
Örtülü rol: dialog. İletişim kutusu, onay veya başka bir kullanıcı yanıtı gerektiren önemli bir mesajı bildiren onay penceresiyse role="alertdialog" değerini ayarlayın.
İletişim kutusu, erişilebilir bir ada da sahip olmalıdır. Erişilebilir özellikli ad için görünür metin sağlayabiliyorsa aria-labelledby="idOfLabelingText" özelliğini 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; ve Safari, color: black; background-color: white; değerini ayarlar. color öğesi body veya :root öğesinden değil dialog öğesinden devralınır. Bu beklenmedik bir durum olabilir. background-color özelliği devralınmaz.
Öğrendiklerinizi sınayın
Diyalog öğesi hakkındaki bilginizi test edin.
Diyaloğun arkasındaki alanın stilini nasıl belirlersiniz?
::background sözde öğesiyle.::backdrop sözde öğesiyle.background mülküyle.