İletişim kutusunu kapatma

Modern kalıcı iletişim kutuları genellikle "hafif kapatma" özelliğini destekler. Bu özellik, kullanıcıların arka planı (iletişim kutusunun dışındaki alan) tıklayarak veya dokunarak iletişim kutusunu kapatmasına olanak tanır. closedby özelliği, özel JavaScript olmadan bu davranışı etkinleştirmenin bildirim temelli bir yolunu sunar.

Uygulama

Hafif kapatmayı etkinleştirmek için:

1. <dialog> öğesine closedby="any" ekleyin.
2. dialog.showModal() tuşlarını kullanarak iletişim kutusunu açın.

Özellik Değerleri

• any: Hafif kapatmayı (arka planı tıklama), "kapatma isteklerini" (Esc tuşu) ve geliştirici mekanizmalarını (ör. dialog.close()) etkinleştirir.
• closerequest: Yalnızca "kapatma isteklerini" ve geliştirici mekanizmalarını etkinleştirir. Bu, kalıcı iletişim kutuları için varsayılan seçenektir.
• none: İletişim kutusunu yalnızca geliştirici mekanizmaları kapatabilir.

Arka planı tasarlama

Bir iletişim kutusu showModal() kullanılarak kalıcı olarak açıldığında tarayıcı bir ::backdrop sözde öğesi oluşturur. Bu arka plan, görüntü alanının tamamını kaplar ve doğrudan iletişim kutusunun arkasında yer alır.

/* Style the backdrop to indicate the dialog is modal */
dialog::backdrop {
  background-color: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(2px); /* Optional: add blur for modern browsers */
}

Örnek

<!-- MANDATORY: Use closedby="any" to enable light-dismiss behavior -->
<dialog id="myDialog" closedby="any" aria-labelledby="dialogTitle">
  <form method="dialog">
    <h2 id="dialogTitle">Feedback</h2>
    <p>Click outside this box or press Esc to dismiss.</p>
    <button type="submit">Close</button>
  </form>
</dialog>

<button onclick="document.getElementById('myDialog').showModal()">Open Dialog</button>

Kısıtlamalar ve erişilebilirlik

• ZORUNLU: Hafif kapatmayı bildirimli olarak etkinleştirmek için closedby="any" kullanın.
• ZORUNLU: Kalıcı iletişim kutularını her zaman showModal() ile açın. Bu sayede iletişim kutusu en üst katmanda yer alır, odak kilitlenir ve Esc tuşu işlenir.
• DO: İletişim kutusuna erişilebilir özellikli ad eklemek için aria-labelledby veya aria-label kullanın.
• YAPMAYIN: Kalıcı olmayan iletişim kutuları (show() ile açılır) için closedby kullanmayın. Bu iletişim kutularının arka planı yoktur ve hafif kapatma tetiklenmez.
• YAPMAYIN: Kapatma işleminden önce gerçekleşmesi gereken kritik mantık için click etkinliğini kullanmayın. Bunun yerine close veya cancel etkinliklerini dinleyin.

Yedek stratejiler

ZORUNLU: closedby özelliğini henüz desteklemeyen tarayıcılar için aşağıdaki komut dosyasını kullanarak tıklamanın iletişim kutusu içeriğinin sınırları dışında gerçekleşip gerçekleşmediğini kontrol ederek hafif kapatma için bir yedek uygulamanız gerekir:

const dialog = document.querySelector('dialog');

// Fallback for browsers without closedby support
if (!('closedBy' in HTMLDialogElement.prototype)) {
  dialog.addEventListener('click', (event) => {
    // 1. When clicking the backdrop, the event target is the dialog element itself.
    // Ignore clicks where the target is a child element inside the dialog.
    if (event.target !== dialog) return;

    // 2. Check if the click coordinates fall within the dialog's content box.
    // This distinguishes between a click on the backdrop vs a click on the dialog's background/padding.
    const rect = dialog.getBoundingClientRect();
    const isDialogContent = (
      rect.top <= event.clientY &&
      event.clientY <= rect.top + rect.height &&
      rect.left <= event.clientX &&
      event.clientX <= rect.left + rect.width
    );

    if (isDialogContent) return;

    // 3. Since the click was outside the content area (on the backdrop), manually close the dialog.
    dialog.close();
  });
}