وسم النافذة الحوارية <dialog>

الصياغة

<dialog id="box">
  <p>المحتوى</p>
  <button onclick="box.close()">إغلاق</button>
</dialog>
<button onclick="box.showModal()">افتح</button>

⚡ جرّب بنفسك

عدّل الكود واضغط «تحديث» لترى النتيجة فورًا — التجربة أفضل معلّم.

<button onclick="document.getElementById('d1').showModal()" style="background:#7c5cff; color:white; border:0; padding:10px 20px; border-radius:8px; cursor:pointer">افتح النافذة</button>
<dialog id="d1" style="border:0; border-radius:14px; padding:24px; max-width:320px">
  <h3 style="margin:0 0 8px">نافذة حوارية 👋</h3>
  <p>جرّب الإغلاق بمفتاح Esc أيضًا.</p>
  <button onclick="this.closest('dialog').close()" style="padding:8px 16px; border-radius:8px; border:1px solid #ccc; cursor:pointer">إغلاق</button>
</dialog>

أهم الخصائص

💡 نصائح عملية

• زر إغلاق بلا جافاسكريبت: form method="dialog" داخل النافذة
• عتّم الخلفية بأناقة: dialog::backdrop { background: rgb(0 0 0 / .5) }

⚠️ أخطاء شائعة

• فتحه بإضافة open يدويًّا — تخسر التعتيم وحبس التركيز وEsc
• بناء مودال من div + z-index في 2026 — الوسم يفعلها أفضل وأسهل

وسوم ذات صلة