Kaip veikia savasis dialog elementas?

Question

Accepted Answer

`<dialog>` yra savasis elementas **modalams ir dialogo langams**. Jis tvarko fokumo sulaikymo logiką, fono dalį, viršutinį sluoksnį ir uždarymo Escape mygtuku funkcionalumą — funkcijas, kurias priešingu atveju turėtumėte sukurti rankiniu būdu su dideliu kiekiu JavaScript ir ARIA.

```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>
```

## Atidarymas ir uždarymas JS

```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
});
```

## Ką gaunate nemokamai naudodami showModal()

- **Fokumo sulaikymas** — Tab lieka dialogo viduje, kol jis atidarytas.
- **Fono dalis** — stiliuojama per `::backdrop`, ir spustelėjimas iš šono yra aptinkamas.
- **Viršutinis sluoksnis** — surendirintas virš visko nepaisant `z-index`.
- **Escape klavišas** jį uždaro.
- **`method="dialog"`** formoje uždaro dialogo langą ir įrašo, kuris mygtukas buvo paspaustas.

## Fono stiUs

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

## Kodėl tai svarbu

Prieš `<dialog>`, prieinami modalai reikalavo rankinės fokumo valdymo, ARIA vaidmenų, slinkimo blokavimo ir Escape apdorojimo — garsėjusio klaidų šaltinio.

Savasis elementas suteikia jums visą tai teisingai iš karto.

Naudokite `showModal()` tiems paskyros modalams; tai šiuolaikinis ir prieinamas numatytasis dialogo langų sprendimas.