Πώς λειτουργεί το native στοιχείο dialog;

Question

IT Interview Practice · Accepted Answer

Το `<dialog>` είναι το native στοιχείο για **modals και dialogues**. Χειρίζεται την παγίδευση εστίασης, το backdrop, το top layer και το Escape-to-close — δυνατότητες που θα έπρεπε διαφορετικά να δημιουργήσετε χειροκίνητα με πολλό 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 παραμένει μέσα στο dialog ενώ είναι ανοιχτό.
- **Backdrop** — διαμορφώσιμο μέσω `::backdrop`, και το κλικ έξω είναι ανιχνεύσιμο.
- **Top layer** — αποδίδεται πάνω από τα πάντα ανεξάρτητα από το `z-index`.
- **Πλήκτρο Escape** το κλείνει.
- **`method="dialog"`** σε ένα form κλείνει το dialog και καταγράφει ποιο κουμπί υποβλήθηκε.

## Styling του backdrop

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

## Γιατί είναι σημαντικό

Πριν από το `<dialog>`, τα προσβάσιμα modals απαιτούσαν χειροκίνητη διαχείριση εστίασης, ρόλους ARIA, κλείδωμα scroll και χειρισμό Escape — ένα臭ό διάσημη πηγή σφαλμάτων.

Το native στοιχείο σας δίνει όλα αυτά σωστά έξω από το κουτί.

Χρησιμοποιήστε `showModal()` για πραγματικά modals· είναι το σύγχρονο, προσβάσιμο προεπιλογή για dialogues.

Άνοιγμα και κλείσιμο στο JS

Τι παίρνετε δωρεάν με showModal()

Styling του backdrop

Γιατί είναι σημαντικό

Σχετικές ερωτήσεις