native dialog element எவ்வாறு செயல்படுகிறது?

Question

Accepted Answer

`<dialog>` என்பது **modals மற்றும் dialogs**-க்கான native 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** — dialog திறந்திருக்கும்போது Tab அதற்குள்ளேயே இருக்கும்.
- **Backdrop** — `::backdrop` மூலம் style செய்யக்கூடியது, மேலும் வெளியே click செய்வதை கண்டறியலாம்.
- **Top layer** — `z-index` எதுவாக இருந்தாலும் அனைத்திற்கும் மேலே render ஆகிறது.
- **Escape key** அதை மூடுகிறது.
- form-இல் உள்ள **`method="dialog"`** dialog-ஐ மூடி, எந்த button submit செய்தது என்பதைப் பதிவு செய்கிறது.

## backdrop-ஐ style செய்தல்

```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-க்கான பிரபலமான ஆதாரமாக இருந்தது.

native element இவை அனைத்தையும் சரியாக, பெட்டியிலிருந்து வெளியே (out of the box) வழங்குகிறது.

உண்மையான modals-க்கு `showModal()`-ஐ பயன்படுத்துங்கள்; dialogs-க்கு இது நவீன, accessible default ஆகும்.