شرح العنصر <dialog> في HTML

HTML

مقدمة

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

معلومة سريعة: تم تقديم عنصر <dialog> بشكل كامل في مواصفات HTML5.2 وهو مدعوم الآن في جميع المتصفحات الحديثة.

المميزات الرئيسية

• سهولة التنفيذ: لا يحتاج إلى JavaScript معقد للوظائف الأساسية
• إمكانية الوصول: مصمم مع مراعاة معايير WCAG لإمكانية الوصول
• إدارة التركيز التلقائية: يدير التركيز داخل الصندوق تلقائيًا
• طبقة التغطية المدمجة: يوفر طبقة overlay تلقائية مع إمكانية تخصيصها
• التكامل مع النماذج: يدعم إغلاق الصندوق عند إرسال النموذج داخله

الصيغة الأساسية

<dialog id="myDialog">
  <h5>عنوان الحوار</h5>
  <p>محتوى الصندوق الحواري هنا...</p>
  <button onclick="document.getElementById('myDialog').close()">إغلاق</button>
</dialog>

<button onclick="document.getElementById('myDialog').showModal()">فتح الحوار</button>
  

طرق التحكم بالصندوق الحواري

عرض الصندوق كـ Modal

// JavaScript
dialogElement.showModal();
  

يعرض الصندوق كـ modal مع طبقة overlay تلقائية ويمنع التفاعل مع بقية الصفحة.

عرض الصندوق كـ Non-Modal

// JavaScript
dialogElement.show();
  

يعرض الصندوق دون طبقة overlay ويسمح بالتفاعل مع بقية الصفحة.

إغلاق الصندوق

// JavaScript
dialogElement.close(); // إغلاق بسيط
dialogElement.close('قيمة الإرجاع'); // إغلاق مع قيمة إرجاع
  

السمات والأحداث

السمات المهمة

<dialog open>...</dialog> // صندوق مفتوح تلقائيًا

الأحداث الرئيسية

// حدث الإغلاق
dialogElement.addEventListener('close', (event) => {
  console.log('تم إغلاق الصندوق');
});

// حدث الإلغاء (عند الضغط على Esc)
dialogElement.addEventListener('cancel', (event) => {
  console.log('تم إلغاء الصندوق');
});
  

التنسيق باستخدام CSS

يمكن تخصيص مظهر الصندوق وطبقة الخلفية:

/* تنسيق الصندوق الأساسي */
dialog {
  width: 80%;
  max-width: 600px;
  border: none;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.2);
  padding: 2rem;
  animation: fadeIn 0.3s ease-out;
}

/* طبقة الخلفية */
dialog::backdrop {
  background-color: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(2px);
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-20px); }
  to { opacity: 1; transform: translateY(0); }
}
  

أمثلة متقدمة

صندوق تأكيد متقدم

<dialog id="confirmDialog">
  <h6>تأكيد العملية</h6>
  <p>هل أنت متأكد من تنفيذ هذه العملية؟</p>
  <div class="actions">
    <button class="secondary" onclick="this.closest('dialog').close(false)">إلغاء</button>
    <button class="primary" onclick="this.closest('dialog').close(true)">تأكيد</button>
  </div>
</dialog>

<script>
  const confirmDialog = document.getElementById('confirmDialog');
  
  async function showConfirmation() {
    confirmDialog.showModal();
    return new Promise((resolve) => {
      confirmDialog.addEventListener('close', () => {
        resolve(confirmDialog.returnValue === 'true');
      }, { once: true });
    });
  }

  // استخدام الصندوق
  async function deleteItem() {
    const confirmed = await showConfirmation();
    if (confirmed) {
      // تنفيذ الحذف
    }
  }
</script>
  

نموذج تسجيل متكامل

<dialog id="authDialog">
  <form method="dialog">
    <h6>تسجيل الدخول</h6>
    
    <div class="form-group">
      <label for="email">البريد الإلكتروني</label>
      <input type="email" id="email" required>
    </div>
    
    <div class="form-group">
      <label for="password">كلمة المرور</label>
      <input type="password" id="password" required minlength="8">
    </div>
    
    <div class="form-footer">
      <button type="button" value="cancel">إلغاء</button>
      <button type="submit" value="submit">تسجيل الدخول</button>
    </div>
  </form>
</dialog>

<script>
  const authDialog = document.getElementById('authDialog');
  
  authDialog.addEventListener('close', () => {
    if (authDialog.returnValue === 'submit') {
      const email = document.getElementById('email').value;
      const password = document.getElementById('password').value;
      // معالجة تسجيل الدخول
    }
  });
</script>

أفضل الممارسات

1. استخدم العناوين الوصفية: اختر عناوين توضح الغرض من الصندوق
2. وفر طرق إغلاق متعددة: زر إغلاق واضح + زر Esc + النقر خارج الصندوق
3. حافظ على البساطة: تجنب الإفراط في المحتوى داخل الصندوق
4. ركز على إمكانية الوصول: تأكد من عمل التركيز بشكل صحيح مع قارئات الشاشة
5. أضف تأثيرات حركية: استخدم تحولات بسيطة لفتح وإغلاق الصندوق

دعم المتصفحات

يدعم عنصر <dialog> جميع المتصفحات الحديثة بما في ذلك:

• Chrome 37+
• Firefox 53+
• Safari 15.4+
• Edge 79+

للدعم في المتصفحات القديمة: يمكن استخدام dialog-polyfill لدعم Internet Explorer والإصدارات القديمة من المتصفحات.

الخاتمة

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

<dialog id="thanksDialog">
  <h6>شكرًا لك!</h6>
  <p>لقد تعرفت الآن على عنصر <code>&lt;dialog&gt;</code> في HTML.</p>
  <button onclick="this.closest('dialog').close()">تم</button>
</dialog>

<button onclick="document.getElementById('thanksDialog').showModal()">
  عرض رسالة الشكر
</button>

كيف كان المقال؟