דף זה תורגם על ידי Cloud Translation API.

חלונות קופצים: הם יתעוררו לחיים!

Jhey Tompkins

זהירות: ב-27 באוקטובר 2022, במסגרת יוזמת Open UI, המאפיין של Popover API ישתנה מ-popup ל-popover. בקשת השינוי הזו מוזגה ל-Chromium ב-3 בנובמבר 2022. ההפניות עודכנו כך שישתמשו במוסכמת השמות החדשה של popover.

המטרה של היוזמה Open UI היא לעזור למפתחים ליצור חוויות משתמש מעולות. לשם כך, אנחנו מנסים לטפל בדפוסים בעייתיים יותר שמפתחים נתקלים בהם. כדי לעשות זאת, אנחנו מספקים ממשקי API ורכיבים מובנים טובים יותר בפלטפורמה.

אחת מהבעיות האלה היא חלונות קופצים, שמתוארים ב-Open UI בתור 'חלונות קופצים'.

לחלונות קופצים יש מוניטין מקוטב למדי במשך זמן רב. הסיבה לכך היא, בין היתר, האופן שבו הם נוצרים ופורסים. זהו דפוס לא קל ליצור בצורה טובה, אבל הוא יכול להניב הרבה ערך על ידי הפניית המשתמשים לדברים מסוימים או העלאת המודעוּת שלהם לתוכן באתר – במיוחד אם משתמשים בו בצורה טעימה.

בדרך כלל יש שני חששות עיקריים בעת בניית חלונות קופצים:

איך לוודא שהיא תוצג מעל שאר התוכן שלכם במיקום מתאים.
איך להפוך אותו לנגיש (ידידותי למקלדת, ניתן להתמקד בו וכו').

ל-Popover API המובנה יש מגוון מטרות, והמטרה הכוללת של כולן היא להקל על המפתחים ליצור את התבנית הזו. המטרות הבולטות הן:

הצגה קלה של אלמנט והצאצאים שלו מעל שאר המסמך.
להפוך אותו לנגיש.
לא נדרש JavaScript עבור רוב ההתנהגויות הנפוצות (ביטול קל, סינגלטון, סידור בערימה וכן הלאה).

אפשר לעיין במפרט המלא של חלונות קופצים באתר OpenUI.

תאימות דפדפן

איפה אפשר להשתמש עכשיו ב-Popover API המובנה? נכון למועד כתיבת המאמר, התכונה נתמכת ב-Chrome Canary באמצעות הדגל 'תכונות ניסיוניות של פלטפורמת אינטרנט'.

כדי להפעיל את הדגל הזה, פותחים את Chrome Canary ונכנסים לכתובת chrome://flags. לאחר מכן מפעילים את הדגל 'תכונות ניסיוניות של פלטפורמת אינטרנט'.

יש גם גרסת Origin לניסיון למפתחים שרוצים לבדוק את התכונה הזו בסביבת ייצור.

לבסוף, אנחנו מפתחים polyfill ל-API. מומלץ לבדוק את המאגר בכתובת github.com/oddbird/popup-polyfill.

אפשר לבדוק אם יש תמיכה בחלונות קופצים באמצעות:

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

הפתרונות הקיימים

מה אתם יכולים לעשות כרגע כדי לקדם את התוכן שלכם מעל כל דבר אחר? אם הדפדפן שלכם תומך בכך, תוכלו להשתמש ברכיב תיבת הדו-שיח של HTML. צריך להשתמש בו בטופס 'מודל'. כדי להשתמש באפשרות הזו, צריך JavaScript.

Dialog.showModal();

יש כמה שיקולים לגבי נגישות. מומלץ להשתמש ב-a11y-dialog, לדוגמה, אם אתם מטפלים במשתמשים ב-Safari בגרסה 15.4 ומטה.

אתם יכולים גם להשתמש באחת מהספריות הרבות שקיימות בנושא חלונות קופצים, התראות או הסברים קצרים. רוב השירותים האלה פועלים באופן דומה.

מוסיפים לגוף מאגר כלשהו כדי להציג חלונות קופצים.
מעצבים אותו כך שיהיה מעל כל שאר הרכיבים.
יוצרים רכיב ומצרפים אותו לקונטיינר כדי להציג חלון קופץ.
כדי להסתיר אותו, מסירים את רכיב ה-popover מה-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, עם אבות קודמים שמבצעים חיתוך. דרך כלי הפיתוח אפשר גם לראות אילו רכיבים נמצאים כרגע בשכבה העליונה. מידע נוסף על השכבה העליונה זמין במאמר הזה.

קובץ 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 או flexbox, מומלץ לעטוף את התוכן ברכיב. אחרת, צריך להצהיר על כלל נפרד שמשנה את 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 מכסה יותר מהמושג ההיסטורי שלנו לגבי חלונות קופצים. אפשר לפתח גרסת build לכל סוגי התרחישים, כמו התראות, תפריטים, הסברים קצרים וכו'.

בחלק מהתרחישים האלה נדרשים דפוסי אינטראקציה שונים. אינטראקציות כמו העברת העכבר. נעשה ניסיון להשתמש במאפיין popoverhovertarget, אבל הוא לא הוטמע כרגע.

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

הרעיון הוא להעביר את העכבר מעל רכיב כדי להציג את היעד. אפשר להגדיר את ההתנהגות הזו באמצעות מאפייני CSS. מאפייני ה-CSS האלה מגדירים את חלון הזמן של העברת העכבר מעל האלמנט שבו חלון קופץ מגיב, ומעל האלמנט עצמו. בהתנהגות ברירת המחדל שנבדקה, חלון קופץ הוצג אחרי 0.5s מפורש של :hover. במצב כזה יש צורך בכיבוי תאורה או בפתיחה של חלון קופץ אחר כדי לסגור (עוד בנושא הזה בהמשך). הסיבה לכך היא שמשך הזמן של ההסתרה של החלונות הקופצים הוגדר ל-Infinity.

הערה: השימוש ב-popoverhovertarget הוא לא סטנדרטי או מיושם כרגע.

בינתיים, אפשר להשתמש ב-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. אבל מה לגבי ההתנהגות של חלון קופץ באופן כללי. מה קורה אם לא רוצים להשתמש ב'סגירה קלה'? או שאתם רוצים להחיל תבנית של מופע יחיד על חלונות הקופצים?

ממשק ה-API של Popover מאפשר לציין שלושה סוגים של חלון קופץ שהתנהגותם שונה מהם.

[popover=auto]/[popover]:

תמיכה ב-Nesting. זה לא אומר רק שהמקור הוא ב-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 כדי להעביר את המיקוד לאלמנט בתוך חלון קופץ. זהו אותו תהליך כמו ב-Dialog, אבל ההבדל מופיע כשמחזירים את המיקוד, בגלל סגירת החלונית בקליק. ברוב המקרים, סגירת חלון קופץ מחזירה את המיקוד לרכיב שהיה במיקוד לפני כן. עם זאת, אם אפשר להעביר את המיקוד לרכיב שבו לחצתם, המיקוד יועבר אליו כשהחלון ייסגר. כדאי לעיין בקטע בנושא ניהול המיקוד במאמר ההסבר.

כדי לראות איך זה עובד, צריך לפתוח את הגרסה במסך מלא של הדמו הזה.

בהדגמה הזו, לאלמנט שמתמקדים בו מופיעה מסגרת ירוקה. אפשר לנסות להקיש על Tab במקלדת כדי לנווט בממשק. שימו לב לאן המיקוד מוחזר כשסוגרים חלון קופץ. יכול להיות שתבחינו גם בכך שאם מקישים על Tab, החלון הקופץ נסגר. זה כבר תוכנן. חלונות קופצים כוללים ניהול של המיקוד, אבל הם לא תופסים את המיקוד. ניווט באמצעות מקלדת מזהה אות סגירה כשהמיקוד יוצא מהחלון הקופץ.

עגינה (בפיתוח)

כשמדובר בחלונות קופצים, דפוס קשה לטיפול הוא עיגון האלמנט לגורם ההפעלה שלו. לדוגמה, אם הסבר קצר מוגדר כך שיופיע מעל הטריגר שלו, אבל מתבצעת גלילה במסמך. חלון התצוגה יכול לחתוך את ההסבר הקצר. יש כרגע הצעות של JavaScript לטיפול בכך, כמו Floating UI. הצוות ימקם מחדש את ההסבר הקצר כדי שתפסיקו את זה, ויסתמכו על סדר המיקומים הרצוי.

עם זאת, אנחנו רוצים שתוכלו להגדיר את זה באמצעות הסגנונות שלכם. כדי להתמודד עם הבעיה הזו, יש ממשק API נלווה שנמצא בפיתוח לצד Popover API. ה-API של מיקום עיגון ב-CSS יאפשר לכם לקשור רכיבים לרכיבים אחרים, והוא יעשה זאת באופן שיציב מחדש את הרכיבים כך שלא ייחתכו על ידי אזור התצוגה.

ההדגמה הזו מתבססת על ה-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 ל-API הזה.

דוגמאות

עכשיו אתם יודעים מה יש לחלון קופץ להציע ואיך, בואו נתעמק בכמה דוגמאות.

התראות

בהדגמה הזו מוצגת ההתראה 'העתקה ללוח'.

נעשה שימוש ב-[popover=manual].
כשמבצעים פעולה, מוצג חלון קופץ עם showPopover.
אחרי זמן קצוב לתפוגה של 2000ms, מסתירים אותו באמצעות hidePopover.

טוסטים

בדמו הזה נעשה שימוש בשכבה העליונה כדי להציג התראות בסגנון 'טוסט'.

חלון קופץ אחד מסוג manual משמש כמאגר.
התראות חדשות מצורפות לחלון הקופץ והוא מוצג.
הן מוסרות באמצעות ה-API של האנימציות באינטרנט בלחיצה, ומוסרות מה-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 של חלונות קופצים משהה את הסרטון.

חלונות קופצים בסגנון וויקי

הדגמה הזו מראה איך אפשר ליצור טיפים בתוך תוכן שמכילים מדיה.

נעשה שימוש ב-[popover=auto]. הצגת אחד מהם מסתירה את האחרים כי הם לא אבולוציוניים.
מוצג ב-pointerenter באמצעות JavaScript.
עוד מועמד מושלם ל-CSS Kening 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. אם משתמשים בהם בצורה נכונה, הם יכולים להיות תוספת נהדרת לפלטפורמת האינטרנט.

חשוב לבדוק את הקטע Open UI. הסבר על חלון הקופץ מתעדכן בהתאם להתפתחות ה-API. כאן אפשר למצוא את כל ההדגמות.

תודה שפנית אלינו.

צילום: Madison Oren ב-Unsplash

חלונות קופצים: הם יתעוררו לחיים!

תאימות דפדפן

הפתרונות הקיימים

החלון הקופץ הראשון

עיצוב של חלון קופץ

סוגים של חלונות קופצים

JavaScript API

נגישות

עגינה (בפיתוח)

דוגמאות

התראות

טוסטים

תפריט בתצוגת עץ

חלון קופץ של מדיה

חלונות קופצים בסגנון וויקי

חלונית הזזה לניווט

ניהול הרקעים

חלון קופץ מותאם אישית של הסמן

חלון קופץ של גיליון פעולות

חלון קופץ שמופעל על ידי מקלדת

חלון קופץ מתוזמן

שומר מסך

מעקב אחר סמן טקסט

תפריט של לחצן פעולה צף

זהו!