تمت ترجمة هذه الصفحة بواسطة Cloud Translation API‏.

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

Jhey Tompkins

ملاحظة: قرّرت مبادرة Open UI تغيير السمة من popup إلى popover لواجهة برمجة التطبيقات Popover API في 27 تشرين الأول (أكتوبر) 2022. تم دمج طلب التغيير هذا في Chromium في 3 تشرين الثاني (نوفمبر) 2022. تم تعديل المراجع للاستفادة من اصطلاح التسمية الجديد في popover.

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

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

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

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

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

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

صورة GIF تعرض إتاحة استخدام الطبقة العليا من DevTools

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

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

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

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

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

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

ملاحظة: وفقًا للإعدادات التلقائية، يتم ضبط ::backdrop في النافذة المنبثقة pointer-events: none.

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

[popover] { display: block; }

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

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

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

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

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

[popover]:open {
 display: flex;
}

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

ملاحظة: للتحقّق مما إذا كان العنصر مفتوحًا باستخدام JavaScript، استخدِم: element.matches(':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>

ملاحظة: قد تلاحظ أيضًا أنّ هناك بعض التغييرات في عملية النقل من المتجر وإليه. ويتم الآن تشغيله من خلال رسومات متحركة منفصلة للدخول من جانب والخروج من الجانب الآخر. وهذا يعني أنّه يمكنك تنفيذ إجراءات مثل الدخول على محور والخروج على محور آخر. احرص على ضبط animation-fill-mode إذا كانت أوقات ::backdrop و[popover] مختلفة.

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

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

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

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

ملاحظة: إنّ استخدام popoverhovertarget ليس موحّدًا أو مُطبَّقًا حاليًا.

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

[popover=auto]/[popover]:

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

تنبيه: سبق أن تم تنفيذ نوع ثالث من النوافذ المنبثقة باستخدام popover=hint في حالات استخدام مثل نصائح الأدوات. تم حلّ هذه المشكلة في 13 تشرين الأول (أكتوبر) 2022 لنقل هذا الإصدار إلى إصدار ثانٍ من عملية التنفيذ.

[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.

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

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

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

الربط (قيد التطوير)

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

هذا كل شيء!

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

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

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

صورة مادلين أورين على Unsplash

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

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

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

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

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

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

JavaScript API

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

الربط (قيد التطوير)

أمثلة

الإشعارات

الخبز المحمص

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

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

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

لائحة التنقل

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

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

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

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

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

شاشة التوقف

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

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

هذا كل شيء!