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

Jhey Tompkins

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

ويتمثّل أحد هذه المشاكل في النوافذ المنبثقة، والتي يتم وصفها في واجهة المستخدم المفتوحة باسم "النوافذ المنبثقة".

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Dialog.showModal();

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

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

• إلحاق بعض الحاوية بالنص الأساسي لعرض النوافذ المنبثقة.
• يمكنك اختيار تصميمه بحيث يكون أعلى من أي شيء آخر.
• أنشئ عنصرًا وألحقه بالحاوية لعرض نافذة منبثقة.
• يمكنك إخفاؤه عن طريق إزالة العنصر المنبثق من 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. يمكن أن يكون متداخلاً في DOM، مع الكيانات الأصلية للاقتصاص. يمكنك أيضًا معرفة العناصر الموجودة حاليًا في الطبقة العلوية من خلال "أدوات مطوري البرامج". للحصول على مزيد من المعلومات حول الطبقة العلوية، اطّلِع على هذه المقالة.

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

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

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

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

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

قد تلاحظ أيضًا أنّ النافذة المنبثقة تحتوي الآن على عنصر زائف ::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 لتعويض هذه الوظيفة.

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 تحديد ثلاثة أنواع من النوافذ المنبثقة تختلف في السلوك.

[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’);
})

الاستماع إلى نافذة منبثقة مخفية:

popoverElement.addEventListener('popoverhide', doSomethingWhenPopoverHides)

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

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

تحقق مما إذا كانت النافذة المنبثقة في الطبقة العلوية:

popoverElement.matches(':open')

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

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

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

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

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

يجب فتح إصدار وضع ملء الشاشة. من هذا العرض التوضيحي للتأكد من نجاحها.

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

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

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

نريدك أن تكون قادرًا على تحديد ذلك باستخدام أنماطك. هناك واجهة برمجة تطبيقات مصاحبة قيد التطوير إلى جانب 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.

الخبز المحمص

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

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

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

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

• ويمكنك استخدام [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.
• يتم فتح ورقة الإجراءات مع مشغِّل النافذة المنبثقة.
• عندما يتم عرض النافذة المنبثقة، يتم ترقيتها إلى الطبقة العلوية وتحويلها إلى وضع العرض.
• يمكن استخدام ميزة "إغلاق خفيف" لإرجاع الجهاز.

نافذة منبثقة تنشّط لوحة المفاتيح

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

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

نافذة منبثقة بشكل مؤقت

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

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

شاشة التوقف

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

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

متابعة علامة الإقحام

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

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

قائمة زر الإجراء العائم

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

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

هذا كل شيء!

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

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

شكرًا على "فرقتك".

صورة من ماديسون أورين على قناة Unسبلاش