Si funksionon elementi i dialogut vendor?

Question

Accepted Answer

`<dialog>` është elementi vendor për **modalet dhe dialogjet**. Ai përqesh trajtimin e fokusit, sfondin, shtresën e sipërme dhe mbylljen me Escape — veçori që përndryshe do të ndërtoje me shumë JavaScript dhe 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>
```

## Hapja dhe mbyllja në 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
});
```

## Çfarë merrni falas me showModal()

- **Trajtimi i fokusit** — Tab mbetet brenda dialogut derisa është i hapur.
- **Sfondi** — i stilizueshëm përmes `::backdrop`, dhe klikimi jashtë është i zbulueshem.
- **Shtresa e sipërme** — renderohet mbi gjithçka pavarësisht nga `z-index`.
- **Çelësi Escape** e mbyll atë.
- **`method="dialog"`** në një formë mbyll dialogun dhe regjistron cilën buton e dërgoi.

## Stilizimi i sfondit

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

## Pse ka rëndësi

Para `<dialog>`, modalet e arritshme kërkojnin menaxhim manual të fokusit, rolet ARIA, bllokimin e rrëshqitjes dhe trajtimin e Escape — një burim i njohur i gabimeve.

Elementi vendor ju jep të gjithë atë në mënyrë korrekte nga kutia.

Përdorni `showModal()` për modalet të vërteta; është parazgjedhja moderne dhe e arritshme për dialogjet.