नेटिव डायलॉग एलिमेंट कैसे काम करता है?

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()` का उपयोग true मोडल्स के लिए करें; यह डायलॉग्स के लिए आधुनिक, सुलभ डिफ़ॉल्ट है।