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

Question

Accepted Answer

`<dialog>` हा **modals आणि dialogs** साठी नेटिव एलिमेंट आहे. हे फोकस ट्रॅपिंग, बॅकड्रॉप, टॉप लेयर आणि Escape-to-close — असे फिचर हँडल करते जे अन्यथा तुम्हाला बरेच जावास्क्रिप्ट आणि 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>` आधी, प्रवेशयोग्य modals साठी मॅन्युअल फोकस व्यवस्थापन, ARIA भूमिका, स्क्रोल लॉकिंग आणि Escape हँडलिंग आवश्यक होते — बग्सचा कुख्यात स्रोत.

नेटिव एलिमेंट तुम्हाला हे सर्व बॉक्सपासून योग्यरित्या देते.

खर्‍या modals साठी `showModal()` वापरा; हे dialogs साठी आधुनिक, प्रवेशयोग्य डिफॉल्ट आहे.