ਨੈਟਿਵ ਡਾਇਲੌਗ ਐਲੀਮੈਂਟ ਕਿਵੇਂ ਕੰਮ ਕਰਦਾ ਹੈ?

Question

Accepted Answer

`<dialog>` **ਮੌਡਲਸ ਅਤੇ ਡਾਇਲੌਗ** ਲਈ ਨੈਟਿਵ ਐਲੀਮੈਂਟ ਹੈ। ਇਹ ਫੋਕਸ ਟ੍ਰੈਪਿੰਗ, ਬੈਕਡ੍ਰੌਪ, ਟੌਪ ਲੇਅਰ, ਅਤੇ 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() ਦੇ ਨਾਲ ਤੁਸੀਂ ਕੀ ਮੁਫਤ ਮਿਲਦਾ ਹੈ

- **ਫੋਕਸ ਟ੍ਰੈਪਿੰਗ** — 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()` ਵਰਤੋ; ਇਹ ਡਾਇਲੌਗ ਲਈ ਆਧੁਨਿਕ, ਅਸਲ ਡਿਫੌਲਟ ਹੈ।