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

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

إحدى هذه المناطق هي النوافذ المنبثقة، الموضحة في فتح واجهة المستخدم باسم "النوافذ المنبثقة".

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

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

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

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

نافذة منبثقة بلوحة المفاتيح تم تفعيلها

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

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

نافذة منبثقة محددة زمنيًا

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

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

شاشة التوقف

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

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

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

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

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

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

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

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

أكملت هذه الخطوة.

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

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

شكرًا على "لفت انتباهك".

---

صورة من تصوير ماديسون أورين على UnLaunch