როგორ მუშაობს ნაცვალი dialog ელემენტი?

Question

Accepted Answer

`<dialog>` არის ლოკალური ელემენტი **მოდალებისა და დიალოგებისთვის**. ის უზრუნველყოფს ფოკუსის ღერძებას, ფონს, ზედა ფენას და Escape-ით დახურვას — ფუნქციებს, რომლებსაც სხვა შემთხვევაში მოგიწევთ ხელით აშენება დიდი რაოდენობის JavaScript-ისა და 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>
```

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

## რა მიიღებთ უფასოდ showModal()-ით

- **ფოკუსის ღერძება** — Tab რჩება დიალოგის შიგნით ხსნილი მდგომარეობის დროს.
- **ფონი** — შესაძლებელია სტილიზაცია `::backdrop`-ის მეშვეობით, და გარე დაჯახება სამი დადგა მისი.
- **ზედა ფენა** — ყველაფერზე უფრო მაღლა რენდერდება `z-index`-ის მიუხედავად.
- **Escape კლავიში** იხურავს მას.
- **`method="dialog"`** ფორმაზე იხურავს დიალოგს და ჩამოწერს რომელი ღილაკი გამოწერეს.

## ფონის სტილიზაცია

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

## რატომ არის ეს მნიშვნელოვანი

`<dialog>`-მდე, ხელმისაწვდომი მოდალები საჭიროებდნენ ხელით ფოკუსის მართვას, ARIA როლებს, ხვეულის ჩაკეტვას და Escape დამუშავებას — ცნობილი შეცდომების წყარო.

ლოკალური ელემენტი ეს ყველაფერი სწორად იძლევა.

იყენეთ `showModal()` ნამდვილი მოდალებისთვის; ეს დიალოგების თანამედროვე, ხელმისაწვდომი სტანდარტია.