નેટિવ ડાયલોગ એલિમેન્ટ કેવી રીતે કાર્ય કરે છે?

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() સાથે તમને મફતમાં શું મળે છે

- **ફોકસ ટ્રેપિંગ** — ટેબ ડાયલોગ બંધ હોય તેવા સમયે તેની અંદર રહે છે.
- **બેકડ્રોપ** — `::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()` વાપરો સત્ય મોડલ્સ માટે; તે ડાયલોગ્સ માટે આધુનિક, સુલભ ડિફોલ્ટ છે.