<dialog>: عنصر DIALOG
آخر تحديث: 2026-10-13
<dialog>عنصر DIALOG
يمثل صندوق حوار أو نافذة منبثقة، يُفتح عبر showModal() أو show() في JavaScript.
| الفئة | دلالي |
|---|---|
| نموذج المحتوى | محتوى تدفقي |
| العناصر الأم المسموحة | أي عنصر يقبل المحتوى التدفقي |
| وسم الإغلاق | نعم — يتطلب إغلاق </dialog> وسم |
| الحالة | قياسي |
📝 البنية
<dialog>محتوى الحوار</dialog>▶ مثال
عدّل الكود أدناه وشاهد النتيجة المباشرة في الملعب:
🌐 دعم المتصفح
| المتصفح |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| <dialog> | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| مدعوم في جميع المتصفحات الرئيسية | |||||
نصيحة： showModal() يمنح نافذة منبثقة أصلية (خلفية + Esc للإغلاق)؛ الخاصية open تعرضها بشكل غير منبثق.
❓ الأسئلة الشائعة
Qما الفرق بين dialog وطبقة منبثقة بـ div عادي؟
A
<dialog> هو عنصر الحوار النموذجي الأصلي: عند فتحه بـ showModal() يأتي برسم في الطبقة العليا (يغطي كل شيء) وحصر التركيز وإغلاق بمفتاح Esc دون كتابة z-index أو مصائد تركيز يدويًا. كل هذه القدرات في طبقات div تحتاج تنفيذًا ذاتيًا.Qما الفرق بين showModal و show في dialog؟
A
showModal() يفتح حوارًا نمطيًا: بطبقة غطاء، ويمنع التفاعل مع بقية الصفحة، ويدعم الإغلاق بمفتاح Esc؛ بينما show() يفتح حوارًا غير نمطي: بلا غطاء ويبقى المستخدم قادرًا على التفاعل مع أجزاء أخرى من الصفحة. وكلاهما يُغلق بـ close().Qهل يمكن تخصيص تنسيق dialog بـ CSS؟
Aنعم. يُنسَّق الغطاء عبر العنصر الزائف
::backdrop، ويُنسَّق جسم الحوار بـ CSS العادي. وانتبه: يتولى عرض العنصر حالة open افتراضيًا — فعند التخصيص لا تلغِ منطق عرض dialog[open].🏷️ وسوم ذات صلة
💡 حالات ذات صلة
المزيد من الحالات قادمة قريبًا — ترقبوا.
📚 دروس ذات صلة
