كيف يعمل عنصر dialog الأصلي؟

Question

Accepted Answer

`<dialog>` هو العنصر الأصلي لـ **النوافذ المشروطة والحوارات**. يتعامل مع فخ التركيز والخلفية والطبقة العلوية وإغلاق Escape — ميزات كان عليك بخلاف ذلك بناؤها يدويًا باستخدام الكثير من 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()` للنوافذ المشروطة الحقيقية؛ إنه الافتراضي الحديث والمتاح للحوارات.