كنت أقرأ في بعض مدونات أخبار التكنولوجيا وعثرت على عنوان Popover API الذي وصل إلى Baseline. لقد كنت في حيرة من أمري، خلال تعمقي الأخير في تطوير الواجهة الأمامية، واجهت مؤخرًا صعوبة بالغة في التعود على استخدام العناصر في HTML. أثناء تصفحي للمدونة، كنت في حيرة من أمري بشأن كيفية استخدامي للعنصر حتى الآن.

ليرة تركية؛ د

اختر

• النوافذ المنبثقة المشروطة التي تتطلب تركيز المستخدم
• إمكانية الوصول والتفاعل مع لوحة المفاتيح

اختر نافذة منبثقة لـ:

• النوافذ المنبثقة غير المشروطة مع الرفض الخفيف
• سهولة التنفيذ مع الحد الأدنى من التعليمات البرمجية

عنصر

بحسب MDN عنصر الحوار

يمثل عنصر HTML مربع حوار مشروط أو غير مشروط أو مكون تفاعلي آخر، مثل تنبيه قابل للرفض أو مفتش أو نافذة فرعية.

يتم استخدام A بشكل عام ويتم عرضه فوق المحتوى عندما يحتاج موقع الويب إلى لفت انتباه المستخدم إلى شيء مهم. على سبيل المثال، الاشتراك في رسالة إخبارية، أو طلب (أشبه بالإجبار) لتعطيل أداة حظر الإعلانات، أو قبول الشروط والأحكام.

عنصر

كعنصر مشروط

نظرًا لأنك ربما صادفت عدة مرات على مواقع ويب متعددة، سيتم رسم بعض هذه النوافذ المنبثقة على شاشتك بأكملها أثناء تعتيم الخلفية أو تعطيلها وتركيز المستخدم فقط على المهمة التي بين يديه، ويجب على المستخدم إما التجاهل (فقط إذا كان مسموحًا به) النافذة المنبثقة أو أدخل المعلومات المطلوبة حتى تختفي. يُطلق على هذا السلوك اسم "العنصر باعتباره مشروطًا". تظهر هذه العناصر المشروطة في الطبقة العليا من الصفحة.

//To open dialog as a modal.

dialog.showModal();

// To close the dialog.

dialog.close();

عند عرضه باستخدام طريقة showModal () باستخدام مفتاح esc. يتوقع مستخدمو لوحة المفاتيح مثل هذا السلوك الذي يجب الحفاظ عليه والذي يقدمه المتصفح. إذا كانت عدة مربعات حوار مشروطة مفتوحة، فسيتم إغلاق مربع الحوار الأخير فقط باستخدام مفتاح esc.

العنصر باعتباره غير مشروط

قد لا ترغب دائمًا في إيقاف التدفق الطبيعي للمستخدم لاستخدام صفحة الويب الخاصة بك، أو التوقف عن القيام بكل شيء آخر والتركيز على ما تريد عرضه مع الاحتفاظ بالمحتوى الخاص بك، مثل إشعار التوست، أو الموافقة على ملفات تعريف الارتباط، أو تلميح الأدوات العام معلومات. يجب أن تظهر في الطبقة العليا من الصفحة، فوق أي محتوى آخر يمكن أو لا يمكن للمستخدم التفاعل معه. تسمى هذه الأنواع من النوافذ المنبثقة بالنوافذ المنبثقة غير المشروطة. يمكن للمستخدمين استبعاد هذه الأمور يدويًا أو بشكل عام وستختفي من تلقاء نفسها. لا تزال مربعات الحوار غير المشروطة تظهر في الطبقة العليا من الصفحة ولكن يمكن التحكم في أولويتها باستخدام فهرس z وسيأخذ العنصر المشروط فهرس z أعلى من هذا وسيجعل هذا غير قابل للوصول.

//To open dialog as a modal.

dialog.show();

// To close the dialog.

dialog.close();

مثال الكود

بعض القضايا

لقد واجهت صعوبة في فهم كيفية عمل واستخدام العناصر غير المشروطة. وفقًا لي، فإن العنصر غير المشروط يتصرف بشكل غير متسق ويحتاج إلى كود Javascript للتعامل مع مواقف مثل:

• لا توجد وظيفة الفصل الخفيف. لن يؤدي النقر خارج النموذج إلى إغلاق ملف .
• لا يتجاهل مفتاح esc ويحتاج إلى Javascript للتعامل مع هذا السيناريو.
• تحتاج إلى إدارة مؤشر z يدويًا إذا كنت تريد رسم الطبقة العليا.

لدهشتي قامت واجهة برمجة تطبيقات popover بالرد على هذه المشكلات أو إصلاحها والمزيد....

واجهة برمجة التطبيقات المنبثقة

popover هي سمة يمكن إضافتها إلى أي سمة HTML. هنا مثال.

Toggle the popover
Popover content

الفرق الرئيسي بين العنصر المنبثق وعنصر

الفرق الرئيسي بين العنصر المنبثق وعنصر