النوافذ الحوارية القياسية بـ dialog | العناصر التفاعلية في لغة HTML

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي

يمثل عنصر <dialog> الحاوية القياسية الأصيلة لإنشاء النوافذ الحوارية المشروطة وصناديق التأكيد. عند تشغيل هذا العنصر كنافذة مشروطة، يرتفع مباشرة إلى الطبقة العليا في محرك المتصفح متجاوزاً أي قيود ترتيب طبقي سابقة في الصفحة.

الصف 2 كود برمجي

HTML

<!-- Native dialog container -->
<dialog open id="cookie-dialog">
  <h2>Privacy Preferences</h2>
  <p>Customize your cookie settings anytime.</p>
  <button type="button">Confirm</button>
</dialog>

جرّب بنفسك

الصف 3 صورة توضيحية

مقارنة النافذة الحوارية dialog والطبقة العليا مقابل القوائم المنبثقة popover

الصف 4 شرح توضيحي

يؤدي استدعاء النافذة الحوارية عبر طريقة dialog.showModal البرمجية إلى تفعيل طبقة تعتيم شاملة للصفحة يمكن تنسيقها عبر ::backdrop، مع حصر التركيز تلقائياً داخل النافذة وتوفير إمكانية الإغلاق السريع بالنقر على زر الهروب في لوحة المفاتيح.

الصف 5 ملاحظة هامة

Building Native Modals with Dialog النوافذ الحوارية القياسية بـ dialog

شرح صفوف ومحتوى الفقرة

جميع فقرات هذا الدرس (العناصر التفاعلية في لغة HTML)