native dialog element ఎలా పని చేస్తుంది?

Question

Accepted Answer

`<dialog>` అనేది **modals మరియు dialogs** కోసం native element. ఇది focus trapping, backdrop, top layer, మరియు Escape-to-close — ఆ విధమైన features లను నిర్వహిస్తుంది, ఇవి మీరు అలా కాకపోతే చాలా JavaScript మరియు ARIA తో hand-build చేయవలసి ఉంటుంది.

```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() సাથე ఉచితంగా మీరు పొందేది

- **Focus trapping** — Tab dialog తెరిచినప్పుడు లోపల ఉండిపోతుంది.
- **Backdrop** — `::backdrop` ద్వారా styleable, మరియు బయట clicking detectable.
- **Top layer** — `z-index` సంబంధం లేకుండా ప్రతిదానికీ పైన renders చేస్తుంది.
- **Escape key** దానిని మూస్తుంది.
- **`method="dialog"`** form లో button ఏది submit చేసిందో dialog ను మూసి record చేస్తుంది.

## Backdrop styling

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

## ఇది ఎందుకు ముఖ్యం

`<dialog>` ముందు, accessible modals manual focus management, ARIA roles, scroll locking, మరియు Escape handling అవసరం — ఒక臭い bugs యొక్క ప్రసిద్ధ మూలం.

Native element మీకు అన్నీ సరిగ్గా out of the box ఇస్తుంది.

`showModal()` ను true modals కోసం ఉపయోగించండి; ఇది dialogs కోసం modern, accessible default.