Native dialog elementi nasıl çalışır?

Question

Accepted Answer

`<dialog>` **modal ve diyaloglar** için native elementtir. Focus trapping, backdrop, top layer ve Escape-to-close özelliklerini yönetir — aksi takdirde çok fazla JavaScript ve ARIA ile elle oluşturmanız gereken özellikleri.

```html
<dialog id="myModal">
  <form method="dialog">           
    <h2>Confirm</h2>
    <p>Are you sure?</p>
    <button value="cancel">Cancel</button>
    <button value="ok">OK</button>
  </form>
</dialog>
```

## JS'de açma ve kapatma

```js
const modal = document.getElementById("myModal");

modal.showModal(); // opens as a MODAL: backdrop + focus trapped + Esc closes
modal.show();      // opens as a NON-modal (no backdrop, page stays interactive)
modal.close("ok"); // closes, sets returnValue

modal.addEventListener("close", () => {
  console.log(modal.returnValue); // "ok" or "cancel" — from the button's value
});
```

## showModal() ile ücretsiz olarak ne elde edersiniz

- **Focus trapping** — Tab, diyalog açıkken diyalog içinde kalır.
- **Backdrop** — `::backdrop` aracılığıyla stillenebilir ve dışına tıklamak algılanabilir.
- **Top layer** — `z-index` ne olursa olsun her şeyin üzerinde işlenir.
- **Escape tuşu** onu kapatır.
- **`method="dialog"`** bir form üzerinde diyalogu kapatır ve hangi düğmenin gönderildiğini kaydeder.

## Backdrop'ı şekillendirme

```css
dialog::backdrop { background: rgba(0, 0, 0, 0.5); }
dialog { border: none; border-radius: 8px; padding: 2rem; }
```

## Neden önemli

`<dialog>` öncesinde, erişilebilir modal'lar manuel focus yönetimi, ARIA rolleri, scroll kilitlemesi ve Escape işleme gerektiriyordu — hataların ünlü bir kaynağı.

Native element, tüm bunları kutudan çıkar çıkmaz doğru bir şekilde sağlar.

Gerçek modal'lar için `showModal()` kullanın; diyaloglar için modern, erişilebilir varsayılandır.