নেটিভ dialog উপাদান কীভাবে কাজ করে?

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()` ব্যবহার করুন; এটি ডায়ালগের জন্য আধুনিক, অ্যাক্সেসযোগ্য ডিফল্ট।