नेटिभ dialog element कसरी काम गर्छ?

Question

Accepted Answer

`<dialog>` **modals र dialogs** को लागि नेटिभ element हो। यसले focus trapping, backdrop, top layer, र Escape-to-close लाई सम्भालन्छ — यो सब features तपाईंले अन्यथा धेरै 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() को साथ तपाईंले के पाउनु हुन्छ

- **Focus trapping** — Tab dialog भित्र खुला रहँदा राहिरन्छ।
- **Backdrop** — `::backdrop` मा स्टाइल गर्न सकिन्छ, र बाहिर क्लिक गर्नु पत्ता लगाउन सकिन्छ।
- **Top layer** — `z-index` को परवाह नगरी सबै भन्दा माथि render हुन्छ।
- **Escape key** यसलाई बन्द गर्छ।
- **`method="dialog"`** form मा dialog लाई बन्द गर्छ र कुन बटनले submit गरेको रेकर्ड गर्छ।

## Backdrop को स्टाइलिङ गर्ने

```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 को कुख्यात स्रोत थियो।

नेटिभ element ले यो सब कुरा सही तरिकाले बाकसमा दिन्छ।

`showModal()` true modals को लागि प्रयोग गर्नुहोस्; यो dialogs को लागि आधुनिक, accessible पूर्वनिर्धारण हो।