نیٹو ڈائیلاگ element کیسے کام کرتا ہے؟

Question

Accepted Answer

`<dialog>` **modals اور dialogs** کے لیے نیٹو element ہے۔ یہ focus trapping، backdrop، top layer، اور Escape-to-close کو سنبھالتا ہے — یہ خصوصیات آپ کو بصورت دیگر بہت سارے 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` کے ذریعے styleable، اور باہر کلک کرنا قابل شناخت ہے۔
- **Top layer** — سب کے اوپر render ہوتا ہے چاہے `z-index` کچھ بھی ہو۔
- **Escape key** اسے بند کرتا ہے۔
- **`method="dialog"`** form پر dialog کو بند کرتا ہے اور ریکارڈ کرتا ہے کہ کون سا button submit ہوا۔

## Backdrop کو stylize کرنا

```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 آپ کو یہ سب کچھ صحیح طریقے سے box سے باہر دیتا ہے۔

حقیقی modals کے لیے `showModal()` استعمال کریں؛ یہ dialogs کے لیے جدید، accessible ڈیفالٹ ہے۔