`<dialog>`: Dialog öğesi

<dialog>: Dialog öğesi

• Yerleşik olarak sunulur: <dialog> öğesi; modal veya modal olmayan dialog pencereleri, uyarılar, denetçiler ve alt pencereler gibi etkileşimli öğeleri temsil eder. 2022 Mart ayından beri çoğu tarayıcıda kullanılabilir.

Özellikler

• open: Dialog penceresinin etkin olduğunu ve etkileşime açık olduğunu belirtir. open özelliği ayarlanmadıysa kullanıcıya görünmez. .show() veya .showModal() yöntemlerinin kullanılması önerilir.

Kullanım notları

• HTML <form> öğesi, method="dialog" özelliğini kullanarak dialog penceresini kapatabilir.
• CSS ::backdrop sözde öğesi kullanılarak modal dialog penceresinin arka planı stillendirilebilir.
• autofocus özelliği, dialog açıldığında hemen etkileşime girilecek öğeye eklenmelidir.
• <dialog> öğesine tabindex özelliği eklememeye dikkat edilmelidir.

Erişilebilirlik

• Dialog uygularken kullanıcı odağını uygun şekilde ayarlamak önemlidir.
• Dialog, showModal() yöntemiyle açıldığında odak ilk odaklanabilir öğeye ayarlanır.
• Tüm kullanıcıların dialogu kapatabilmesi için açık bir düğme eklemek en güvenilir yöntemdir.

Örnekler

Yalnızca HTML ile dialog

• Sadece HTML kullanarak modal olmayan bir dialog oluşturma örneği. open özelliği nedeniyle sayfa yüklendiğinde dialog açıktır.

Modal dialog oluşturma

• .showModal() yöntemiyle modal bir dialog açma örneği. Esc tuşu veya dialog içindeki "Close" düğmesiyle kapatılabilir.

Dialogun dönüş değerini işleme

• <dialog> öğesinin returnValue değerini kullanma örneği. Form kullanılarak modal dialog kapatılabilir.

Zorunlu form girdisi olan bir dialogu kapatma

• Dialog içindeki formda zorunlu giriş alanları olduğunda, formnovalidate özelliği kullanılarak kapatılabilir.

Dialog animasyonu

• <dialog> öğesinin display özelliği animasyonlu hale getirilerek dialoga animasyon uygulanabilir.

Teknik özet

• İçerik kategorileri: Akış içeriği, bölüm kökü
• İzin verilen içerik: Akış içeriği
• Örtük ARIA rolü: dialog
• DOM arayüzü: HTMLDialogElement

Spesifikasyon

• HTML Standardı # the-dialog-element

Tarayıcı uyumluluğu

• Başlıca tarayıcıların çoğu <dialog> öğesini ve open özelliğini tam olarak destekler.

Ayrıca bakın

• HTMLDialogElement arayüzü
• HTMLDialogElement için close ve cancel olayları
• HTMLDialogElement için open özelliği
• HTML öğeleri için inert global özelliği
• CSS ::backdrop sözde öğesi