النوافذ المنبثقة: إنها تحرز عودة جديدة!

Jhey Tompkins

تهدف مبادرة Open UI إلى تسهيل مهمة المطوّرين في تقديم تجارب مستخدم رائعة. ولتحقيق ذلك، نحاول معالجة الأنماط الأكثر إشكالية التي يواجهها المطوّرون. ويمكننا تحقيق ذلك من خلال توفير واجهات برمجة تطبيقات ومكوّنات مدمجة أفضل في المنصّة.

أحد مجالات المشاكل هذه هو النوافذ المنبثقة، والتي تُعرف في Open UI باسم "Popovers".

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

هناك غالبًا مصدران قلق رئيسيان عند إنشاء النوافذ المنبثقة:

• كيفية التأكّد من وضعه فوق بقية المحتوى في مكان مناسب
• كيفية جعلها سهلة الاستخدام (متوافقة مع لوحة المفاتيح، وقابلة للتركيز، وما إلى ذلك)

تتضمّن Popover API المضمّنة مجموعة متنوعة من الأهداف، وكلّها تهدف إلى تسهيل إنشاء هذا النمط على المطوّرين. ومن أبرز هذه الأهداف ما يلي:

• تسهيل عرض عنصر وعناصره الفرعية فوق بقية المستند
• تسهيل الوصول إلى المحتوى
• عدم الحاجة إلى JavaScript لمعظم السلوكيات الشائعة (مثل الإغلاق السريع، والعنصر الفردي، والتراص، وما إلى ذلك)

يمكنك الاطّلاع على المواصفات الكاملة للنوافذ المنبثقة على موقع OpenUI الإلكتروني.

توافُق المتصفح

أين يمكن استخدام Popover API المضمّنة الآن؟ تتوفّر هذه الميزة في Chrome Canary خلف علامة "ميزات تجريبية لمنصة الويب" في وقت كتابة هذه المشاركة.

لتفعيل هذه الميزة التجريبية، افتح Chrome Canary وانتقِل إلى chrome://flags. بعد ذلك، فعِّل العلامة "ميزات تجريبية لمنصة الويب".

يتوفّر أيضًا برنامج تجريبي من المصدر للمطوّرين الذين يريدون تجربة هذه الميزة في بيئة إنتاج.

أخيرًا، يجري حاليًا تطوير polyfill لواجهة برمجة التطبيقات. يمكنك الاطّلاع على المستودع على github.com/oddbird/popup-polyfill.

يمكنك التحقّق من توفّر ميزة النوافذ المنبثقة من خلال:

const supported = HTMLElement.prototype.hasOwnProperty("popover");

الحلول الحالية

ما هي الإجراءات التي يمكنك اتّخاذها حاليًا للترويج لمحتواك فوق كل شيء آخر؟ إذا كان متصفّحك يتيح استخدامها، يمكنك استخدام عنصر HTML Dialog. عليك استخدامها في نموذج "نافذة مشروطة". ويتطلّب ذلك تفعيل JavaScript لاستخدامه.

Dialog.showModal();

هناك بعض الاعتبارات المتعلقة بسهولة الاستخدام. يُنصح باستخدام a11y-dialog مثلاً إذا كنت تستهدف مستخدمي الإصدارات الأقدم من 15.4 من متصفّح Safari.

يمكنك أيضًا استخدام إحدى المكتبات العديدة المستندة إلى النوافذ المنبثقة أو التنبيهات أو التلميحات. وتعمل العديد من هذه الميزات بطريقة مشابهة.

• أضِف بعض الحاويات إلى النص الأساسي لعرض النوافذ المنبثقة.
• صمِّمها لتظهر فوق كل العناصر الأخرى.
• أنشئ عنصرًا وأضِفه إلى الحاوية لعرض نافذة منبثقة.
• يمكنك إخفاؤه عن طريق إزالة عنصر النافذة المنبثقة من DOM.

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

النافذة المنبثقة الأولى

هذا كل ما تحتاج إليه.

<div id="my-first-popover" popover>Popover Content!</div>
<button popovertoggletarget="my-first-popover">Toggle Popover</button>

ولكن ما الذي يحدث هنا؟

• لست بحاجة إلى وضع عنصر النافذة المنبثقة في حاوية أو أي شيء آخر، لأنّه يكون مخفيًا تلقائيًا.
• ليس عليك كتابة أي رمز JavaScript لكي يظهر. تتولّى السمة popovertoggletarget هذه العملية.
• وعندما يظهر، تتم ترقيته إلى الطبقة العليا. وهذا يعني أنّه يتم الترويج له فوق document في إطار العرض. ليس عليك إدارة z-index أو القلق بشأن مكان ظهور النافذة المنبثقة في نموذج المستند (DOM). يمكن أن يكون هذا العنصر مضمّنًا في عمق نموذج العناصر في المستند، مع عناصر أصلية تقص المحتوى. يمكنك أيضًا الاطّلاع على العناصر الموجودة حاليًا في الطبقة العلوية من خلال "أدوات المطوّرين". لمزيد من المعلومات عن الطبقة العلوية، يمكنك الاطّلاع على هذه المقالة.

• تتوفّر ميزة "الإغلاق الخفيف" بدون الحاجة إلى إعدادات إضافية. ويعني ذلك أنّه يمكنك إغلاق النافذة المنبثقة باستخدام إشارة إغلاق، مثل النقر خارج النافذة المنبثقة أو التنقّل باستخدام لوحة المفاتيح إلى عنصر آخر أو الضغط على المفتاح Esc. افتحه مرة أخرى وجرِّبه.

ما هي الميزات الأخرى التي تحصل عليها مع النافذة المنبثقة؟ لنستعرض المزيد من التفاصيل حول المثال. اطّلِع على هذا العرض التوضيحي الذي يتضمّن بعض المحتوى على الصفحة.

يتم تثبيت موضع زر الإجراء الرئيسي مع قيمة z-index عالية.

.fab {
  position: fixed;
  z-index: 99999;
}

يتم تضمين محتوى النافذة المنبثقة في نموذج المستند (DOM)، ولكن عند فتح النافذة المنبثقة، يتم عرضه فوق العنصر ذي الموضع الثابت. لست بحاجة إلى ضبط أي أنماط.

قد تلاحظ أيضًا أنّ عنصر popover يتضمّن الآن عنصرًا زائفًا ::backdrop. تحصل جميع العناصر الموجودة في الطبقة العلوية على عنصر زائف ::backdrop قابل للتصميم. يُنسِّق هذا المثال ::backdrop باستخدام لون خلفية ألفا منخفض وفلتر خلفية يطمس المحتوى الأساسي.

تصميم نافذة منبثقة

لنركّز الآن على تصميم النافذة المنبثقة. تلقائيًا، يكون للنافذة المنبثقة موضع ثابت وبعض المساحة المتروكة المطبَّقة. يتضمّن أيضًا display: none. يمكنك إلغاء هذا الإعداد لعرض نافذة منبثقة. ولكن لن يؤدي ذلك إلى ترقيته إلى الطبقة العليا.

[popover] { display: block; }

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

:open {
  display: grid;
  place-items: center;
}

بشكلٍ تلقائي، سيتم عرض النافذة المنبثقة في منتصف مساحة العرض باستخدام margin: auto. ولكن في بعض الحالات، قد تحتاج إلى تحديد موضع الإعلان بشكل واضح. على سبيل المثال:

[popover] {
  top: 50%;
  left: 50%;
  translate: -50%;
}

إذا أردت عرض المحتوى داخل النافذة المنبثقة باستخدام شبكة CSS أو flexbox، قد يكون من الأفضل تضمين ذلك في عنصر. بخلاف ذلك، عليك تحديد قاعدة منفصلة تغيّر قيمة display عندما يكون العنصر المنبثق في الطبقة العلوية. سيؤدي ضبطها تلقائيًا إلى عرضها تلقائيًا مع تجاهل display: none.

[popover]:open {
 display: flex;
}

إذا جرّبت هذا العرض التوضيحي، ستلاحظ أنّ النافذة المنبثقة تنتقل الآن إلى الداخل والخارج. يمكنك إظهار وإخفاء النوافذ المنبثقة باستخدام أداة الاختيار الزائفة :open. يتطابق أداة الاختيار الزائفة :open مع النوافذ المنبثقة التي يتم عرضها (وبالتالي في الطبقة العليا).

يستخدم هذا المثال خاصية مخصصة لتنفيذ عملية الانتقال. ويمكنك أيضًا تطبيق انتقال على ::backdrop النافذة المنبثقة.

[popover] {
  --hide: 1;
  transition: transform 0.2s;
  transform: translateY(calc(var(--hide) * -100vh))
            scale(calc(1 - var(--hide)));
}

[popover]::backdrop {
  transition: opacity 0.2s;
  opacity: calc(1 - var(--hide, 1));
}


[popover]:open::backdrop  {
  --hide: 0;
}

من النصائح المفيدة هنا تجميع عمليات الانتقال والرسوم المتحركة ضمن طلب بحث وسائط للحركة. يمكن أن يساعد ذلك في الحفاظ على مواعيدك أيضًا. يرجع ذلك إلى أنّه لا يمكنك مشاركة القيم بين popover و::backdrop من خلال سمة مخصّصة.

@media(prefers-reduced-motion: no-preference) {
  [popover] { transition: transform 0.2s; }
  [popover]::backdrop { transition: opacity 0.2s; }
}

حتى هذه المرحلة، رأيت استخدام popovertoggletarget لعرض نافذة منبثقة. ولإغلاقها، نستخدم ميزة "الإغلاق السريع". ولكن يمكنك أيضًا استخدام السمتَين popovershowtarget وpopoverhidetarget. لنضِف زرًا إلى النافذة المنبثقة التي تخفيها ونغيّر زر التبديل لاستخدام popovershowtarget.

<div id="code-popover" popover>
  <button popoverhidetarget="code-popover">Hide Code</button>
</div>
<button popovershowtarget="code-popover">Reveal Code</button>

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

وتتطلّب بعض هذه السيناريوهات أنماط تفاعل مختلفة. التفاعلات، مثل التمرير تمت تجربة استخدام السمة popoverhovertarget، ولكن لم يتم تنفيذها حاليًا.

<div popoverhovertarget="hover-popover">Hover for Code</div>

الفكرة هي تمرير مؤشر الماوس فوق عنصر لعرض الهدف. يمكن ضبط هذا السلوك من خلال خصائص CSS. ستحدّد خصائص CSS هذه الفترة الزمنية التي يتم فيها التمرير فوق عنصر وإيقافه، والتي يتفاعل معها العنصر المنبثق. كان السلوك التلقائي الذي تمّ اختباره يعرض نافذة منبثقة بعد 0.5s صريح للعنصر :hover. بعد ذلك، يجب إغلاقه من خلال النقر خارج النافذة أو فتح نافذة منبثقة أخرى (سيتم توضيح ذلك لاحقًا). كان السبب في ذلك هو ضبط مدة إخفاء النافذة المنبثقة على Infinity.

في الوقت الحالي، يمكنك استخدام JavaScript لتوفير وظيفة polyfill.

let hoverTimer;
const HOVER_TRIGGERS = document.querySelectorAll("[popoverhovertarget]");
const tearDown = () => {
  if (hoverTimer) clearTimeout(hoverTimer);
};
HOVER_TRIGGERS.forEach((trigger) => {
  const popover = document.querySelector(
    `#${trigger.getAttribute("popoverhovertarget")}`
  );
  trigger.addEventListener("pointerenter", () => {
    hoverTimer = setTimeout(() => {
      if (!popover.matches(":open")) popover.showPopover();
    }, 500);
    trigger.addEventListener("pointerleave", tearDown);
  });
});

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

جرِّب هذا العرض التوضيحي حيث يمكنك تمرير مؤشر الماوس فوق الهدف مع ضبط النافذة على 0.5s.

قبل استكشاف بعض حالات الاستخدام والأمثلة الشائعة، لنراجع بعض النقاط.

أنواع النوافذ المنبثقة

لقد تناولنا سلوك التفاعل غير المستند إلى JavaScript. ولكن ماذا عن سلوك النوافذ المنبثقة ككل؟ ماذا لو لم تكن تريد استخدام ميزة "الإغلاق السريع"؟ أو هل تريد تطبيق نمط سينغلتون على النوافذ المنبثقة؟

تتيح لك Popover API تحديد ثلاثة أنواع من النوافذ المنبثقة تختلف في سلوكها.

[popover=auto]/[popover]:

• إمكانية الدمج ولا يعني ذلك أنّها مضمّنة في DOM فقط. يتم تعريف النافذة المنبثقة الأصلية على أنّها نافذة:
  • مرتبطة بموضع DOM (عنصر ثانوي)
  • مرتبطة من خلال تفعيل سمات على العناصر الفرعية، مثل popovertoggletarget وpopovershowtarget وما إلى ذلك.
  • مرتبطة بالسمة anchor (واجهة برمجة التطبيقات CSS Anchoring API قيد التطوير).
• إغلاق خفيف
• يؤدي الفتح إلى إغلاق النوافذ المنبثقة الأخرى التي ليست نوافذ منبثقة أصلية. جرِّب العرض التوضيحي أدناه الذي يوضّح كيفية عمل التضمين مع النوافذ المنبثقة الرئيسية. اطّلِع على كيفية تغيُّر الأمور عند استبدال بعض حالات popoverhidetarget/popovershowtarget بـ popovertoggletarget.
• يؤدي تجاهل إشعار واحد إلى تجاهل جميع الإشعارات، ولكن يؤدي تجاهل إشعار واحد في الحزمة إلى تجاهل الإشعارات التي تظهر فوقه في الحزمة فقط.

[popover=manual]:

• لا يؤدي إلى إغلاق النوافذ المنبثقة الأخرى.
• لا يمكن إغلاق الإشعار من خلال النقر على مساحة فارغة.
• تتطلّب إغلاقًا صريحًا من خلال عنصر مشغّل أو JavaScript.

JavaScript API

عندما تحتاج إلى مزيد من التحكّم في النوافذ المنبثقة، يمكنك استخدام JavaScript. يمكنك استخدام الطريقتَين showPopover وhidePopover. لديك أيضًا الحدثان popovershow وpopoverhide للاستماع إليهما:

عرض نافذة منبثقة js popoverElement.showPopover() إخفاء نافذة منبثقة:

popoverElement.hidePopover()

الاستماع إلى ظهور نافذة منبثقة:

popoverElement.addEventListener('popovershow', doSomethingWhenPopoverShows)

الاستماع إلى ظهور نافذة منبثقة وإلغاء ظهورها:

popoverElement.addEventListener('popovershow',event => {
  event.preventDefault();
  console.warn(‘We blocked a popover from being shown’);
})

الاستماع إلى إخفاء عنصر popover:

popoverElement.addEventListener('popoverhide', doSomethingWhenPopoverHides)

لا يمكنك إلغاء إخفاء النافذة المنبثقة:

popoverElement.addEventListener('popoverhide',event => {
  event.preventDefault();
  console.warn("You aren't allowed to cancel the hiding of a popover");
})

التحقّق ممّا إذا كان عنصر popover في الطبقة العلوية:

popoverElement.matches(':open')

يوفر ذلك طاقة إضافية لبعض السيناريوهات الأقل شيوعًا. على سبيل المثال، عرض نافذة منبثقة بعد فترة من عدم النشاط

يحتوي هذا العرض التوضيحي على عناصر منبثقة تصدر أصواتًا مسموعة، لذا سنحتاج إلى JavaScript لتشغيل الصوت. عند النقر، نخفي النافذة المنبثقة، ونشغّل الصوت، ثم نعرضها مرة أخرى.

تسهيل الاستخدام

تُعد إمكانية الوصول من أهم الاعتبارات عند استخدام Popover API. تربط عمليات ربط تسهيل الاستخدام النافذة المنبثقة بعنصر التشغيل، حسب الحاجة. هذا يعني أنّه ليس عليك الإفصاح عن سمات aria-* مثل aria-haspopup، على افتراض أنّك تستخدم إحدى السمات المشغّلة مثل popovertoggletarget.

لإدارة التركيز، يمكنك استخدام السمة "التركيز التلقائي" لنقل التركيز إلى عنصر داخل نافذة منبثقة. وهذا هو نفسه بالنسبة إلى مربّع الحوار، ولكن يظهر الاختلاف عند إعادة التركيز، وذلك بسبب الإغلاق السريع. في معظم الحالات، يؤدي إغلاق النافذة المنبثقة إلى إعادة التركيز على العنصر الذي كان عليه التركيز سابقًا. ولكن يتم نقل التركيز إلى عنصر تم النقر عليه عند إغلاق النافذة بشكل سريع، إذا كان بإمكان العنصر تلقّي التركيز. اطّلِع على القسم حول إدارة التركيز في الشرح.

عليك فتح نسخة ملء الشاشة من هذا العرض التوضيحي لترى طريقة عمله.

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

الارتساء (قيد التطوير)

عندما يتعلق الأمر بالنوافذ المنبثقة، هناك نمط صعب يجب مراعاته وهو ربط العنصر بمشغّله. على سبيل المثال، إذا تم ضبط تلميح ليظهر فوق مشغّله ولكن تم تمرير المستند. قد يتم قطع تلميح الأدوات هذا بسبب نافذة العرض. تتوفّر حاليًا عروض JavaScript للتعامل مع هذه المشكلة، مثل "Floating UI". سيتم تغيير موضع تلميح الأدوات لكي لا يحدث ذلك، وسيتم الاعتماد على ترتيب المواضع المطلوب.

ولكننا نريد أن تتمكّن من تحديد ذلك باستخدام أنماطك. هناك واجهة برمجة تطبيقات مصاحبة قيد التطوير إلى جانب Popover API لمعالجة هذه المشكلة. ستتيح لك واجهة برمجة التطبيقات CSS Anchor Positioning ربط العناصر بعناصر أخرى، وسيتم ذلك بطريقة تعيد تحديد موضع العناصر لكي لا يتم اقتطاعها من خلال إطار العرض.

يستخدم هذا العرض التوضيحي واجهة برمجة التطبيقات Anchoring API في حالتها الحالية. يستجيب موضع القارب لموضع نقطة الارتكاز في إطار العرض.

في ما يلي مقتطف من CSS الذي يتيح عمل هذا العرض التوضيحي. لا يلزم استخدام JavaScript.

.anchor {
  --anchor-name: --anchor;
}
.anchored {
  position: absolute;
  position-fallback: --compass;
}
@position-fallback --compass {
  @try {
    bottom: anchor(--anchor top);
    left: anchor(--anchor right);
  }
  @try {
    top: anchor(--anchor bottom);
    left: anchor(--anchor right);
  }
}

يمكنك الاطّلاع على المواصفات هنا. سيتوفّر أيضًا رمز polyfill لواجهة برمجة التطبيقات هذه.

أمثلة

بعد أن تعرّفت على مزايا النافذة المنبثقة وطريقة عملها، لنستعرض بعض الأمثلة.

الإشعارات

يعرض هذا العرض التوضيحي إشعارًا بعنوان "نسخ إلى الحافظة".

• يتم استخدام "[popover=manual]".
• عند اتّخاذ إجراء، اعرض النافذة المنبثقة التي تتضمّن showPopover.
• بعد انتهاء مهلة 2000ms، يمكنك إخفاء الإشعار باستخدام hidePopover.

إشعارات Toast

يستخدم هذا العرض التوضيحي الطبقة العلوية لعرض الإشعارات بنمط الإشعارات المنبثقة.

• تعمل نافذة منبثقة واحدة من النوع manual كحاوية.
• تتم إضافة الإشعارات الجديدة إلى النافذة المنبثقة ويتم عرضها.
• تتم إزالتها باستخدام واجهة برمجة التطبيقات الخاصة بالصور المتحركة على الويب عند النقر عليها، كما تتم إزالتها من نموذج المستند (DOM).
• إذا لم تكن هناك إشعارات مؤقتة لعرضها، سيتم إخفاء النافذة المنبثقة.

قائمة متداخلة

يوضّح هذا العرض التوضيحي كيف يمكن أن تعمل قائمة تنقّل متداخلة.

• استخدِم [popover=auto] لأنّه يسمح بعناصر منبثقة متداخلة.
• استخدِم autofocus على الرابط الأول في كل قائمة منسدلة للتنقل باستخدام لوحة المفاتيح.
• وهي خيار مثالي لاستخدام واجهة برمجة التطبيقات CSS Anchoring API. ولكن، يمكنك استخدام كمية صغيرة من JavaScript في هذا العرض التوضيحي لتعديل المواضع باستخدام سمات مخصّصة.

const ANCHOR = (anchor, anchored) => () => {
  const { top, bottom, left, right } = anchor.getBoundingClientRect();
  anchored.style.setProperty("--top", top);
  anchored.style.setProperty("--right", right);
  anchored.style.setProperty("--bottom", bottom);
  anchored.style.setProperty("--left", left);
};

PRODUCTS_MENU.addEventListener("popovershow", ANCHOR(PRODUCT_TARGET, PRODUCTS_MENU));

تذكَّر أنّه بما أنّ هذا العرض التوضيحي يستخدم autofocus، يجب فتحه في "عرض ملء الشاشة" للتنقل باستخدام لوحة المفاتيح.

النافذة المنبثقة للوسائط

يوضّح هذا العرض التوضيحي كيف يمكنك عرض الوسائط في نافذة منبثقة.

• يتم استخدام [popover=auto] لإغلاق الإشعارات بشكل خفيف.
• تستمع JavaScript إلى حدث play للفيديو وتعرض الفيديو.
• يؤدي الحدث popoverhide في النوافذ المنبثقة إلى إيقاف الفيديو مؤقتًا.

النوافذ المنبثقة بنمط Wiki

يوضّح هذا العرض التوضيحي كيف يمكنك إنشاء تلميحات أدوات مضمّنة في المحتوى تحتوي على وسائط.

• يتم استخدام "[popover=auto]". يؤدي عرض أحدها إلى إخفاء البقية لأنّها ليست أصلية.
• يتم عرضها على pointerenter باستخدام JavaScript.
• وهي خيار مثالي آخر لاستخدام CSS Anchoring API.

لائحة التنقل

يعرض هذا العرض التوضيحي كيفية إنشاء لوحة تنقّل باستخدام نافذة منبثقة.

• يتم استخدام [popover=auto] لإغلاق الإشعارات بشكل خفيف.
• يستخدم autofocus لتركيز العنصر الأول في شريط التنقّل.

إدارة الخلفيات

يوضّح هذا العرض التوضيحي كيفية إدارة خلفيات العديد من النوافذ المنبثقة التي تريد إظهار ::backdrop واحدة فقط فيها.

• استخدِم JavaScript للحفاظ على قائمة بالعناصر المنبثقة المرئية.
• طبِّق اسم فئة على أصغر نافذة منبثقة في الطبقة العلوية.

نافذة منبثقة مخصّصة للمؤشر

يوضّح هذا العرض التوضيحي كيفية استخدام popover لترقية canvas إلى الطبقة العلوية واستخدامها لعرض مؤشر مخصّص.

• الترويج لـ canvas إلى الطبقة العليا باستخدام showPopover و[popover=manual]
• عند فتح نوافذ منبثقة أخرى، يمكنك إخفاء النافذة المنبثقة canvas وإظهارها للتأكّد من أنّها في المقدّمة.

نافذة منبثقة لورقة الإجراءات

يوضّح هذا العرض التوضيحي كيف يمكنك استخدام نافذة منبثقة كصفحة إجراءات.

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

النافذة المنبثقة التي تشير إلى تفعيل لوحة المفاتيح

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

• استخدِم cmd + j لعرض النافذة المنبثقة.
• تم ضبط التركيز على input باستخدام autofocus.
• مربع التحرير والسرد هو عنصر popover ثانٍ موضوع أسفل حقل الإدخال الرئيسي.
• يؤدي الإغلاق الخفيف إلى إغلاق لوحة الألوان إذا لم تكن القائمة المنسدلة متوفرة.
• حالة استخدام أخرى لواجهة Anchoring API

نافذة منبثقة محدّدة بوقت

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

• استخدِم JavaScript لعرض النافذة المنبثقة بعد فترة من عدم النشاط.
• عند عرض النافذة المنبثقة، أعِد ضبط الموقّت.

شاشة التوقف

على غرار العرض التوضيحي السابق، يمكنك إضافة لمسة من المرح إلى موقعك الإلكتروني وإضافة شاشة توقف.

• استخدِم JavaScript لعرض النافذة المنبثقة بعد فترة من عدم النشاط.
• انقر خارج الموقِّت لإخفائه وإعادة ضبطه.

تتبُّع المؤشر

يوضّح هذا العرض التوضيحي كيف يمكن أن يتبع عنصر popover مؤشر إدخال.

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

قائمة زر الإجراء الرئيسي

يوضّح هذا العرض التوضيحي كيف يمكنك استخدام popover لتنفيذ قائمة زر الإجراء الرئيسي بدون JavaScript.

• روِّج لعنصر manual من النوع popover باستخدام الطريقة showPopover. هذا هو الزر الرئيسي.
• القائمة هي عنصر منبثق آخر يستهدفه الزر الرئيسي.
• تم فتح القائمة باستخدام popovertoggletarget.
• استخدِم autofocus لنقل التركيز إلى العنصر الأول في القائمة المعروضة.
• يؤدي الإغلاق الخفيف إلى إغلاق القائمة.
• يستخدم رمز التواء :has(). يمكنك الاطّلاع على مزيد من المعلومات حول :has() في هذه المقالة.

هذا كل شيء!

هذا هو تعريف موجز بعنصر popover الذي سيتم إطلاقه قريبًا كجزء من مبادرة Open UI. وعند استخدامها بشكل معقول، ستشكّل إضافة رائعة إلى منصة الويب.

ننصحك بالاطّلاع على Open UI. يتم تعديل شرح النافذة المنبثقة باستمرار مع تطوّر واجهة برمجة التطبيقات. وإليك المجموعة التي تضمّ جميع العروض التوضيحية.

شكرًا على زيارتك.