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

Jhey Tompkins

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

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

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

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

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

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

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

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

תאימות דפדפן

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

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

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

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

בחלק מהתרחישים האלה נדרשים דפוסי אינטראקציה שונים. אינטראקציות כמו העברת העכבר. כבר בדקתם את השימוש במאפיין 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 (מתחת לפיתוח של ממשק API לעוגן של CSS).
• סגירת אור.
• אם פותחים חלונות קופצים אחרים, הם לא חלונות קופצים של אבות. נסו לשחק עם ההדגמה הבאה שמראה איך פועל הקינון עם חלונות קופצים של אבות. אפשר לראות איך שינוי של חלק מהמופעים של popoverhidetarget מתוך popovershowtarget ל-popovertoggletarget משנה דברים.
• אם תסגרו אחד, תסגרו את כל המשבצות, אבל אם תסגרו רק את אלה שנמצאות מעליו במקבץ, המערכת תסגור את המקבץ.

[popover=manual]:

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

ממשק API של JavaScript

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

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

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

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

עיגון (בפיתוח)

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

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

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

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

בהדגמה הזו נוצרת חלונית הזזה לניווט באמצעות חלון קופץ.

• נעשה שימוש ב-[popover=auto] לסגירת אור.
• נעשה שימוש במאפיין autofocus כדי להתמקד בפריט הניווט הראשון.

ניהול הרקעים

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

• להשתמש ב-JavaScript כדי לנהל רשימה של החלונות הקופצים הגלויים.
• מחילים שם מחלקה על החלון הקופץ הנמוך ביותר בשכבה העליונה.

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

ההדגמה הזו מראה איך להשתמש במאפיין popover כדי לקדם canvas לשכבה העליונה ולהשתמש בו כדי להציג סמן מותאם אישית.

• קידום של canvas לשכבה העליונה עם showPopover ו-[popover=manual].
• כשפותחים חלונות קופצים אחרים, צריך להסתיר את החלון הקופץ של canvas ולהציג אותו כדי לוודא שהוא מופיע למעלה.

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

הדגמה זו מראה איך להשתמש בחלון קופץ בתור גיליון פעולות.

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

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

הדגמה זו מראה איך להשתמש בחלון קופץ עבור ממשק משתמש בסגנון לוח הפקודות.

• משתמשים ב-cmd + j כדי להציג את החלון הקופץ.
• input מתמקד ב-autofocus.
• התיבה המשולבת היא popover שניה מתחת לקלט הראשי.
• אם התפריט הנפתח לא מופיע, לוח הצבעים נסגר על ידי התאורה.
• מועמד נוסף ל-API ל-עוגן

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

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

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

שומר מסך

בדומה להדגמה הקודמת, ניתן להוסיף לאתר קצת גחמה ולהוסיף שומר מסך.

• אפשר להשתמש ב-JavaScript כדי להציג את החלון הקופץ אחרי פרק זמן של חוסר פעילות.
• סגירת תאורה כדי להסתיר ולאפס את הטיימר.

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

הדגמה זו מראה איך ניתן ליצור חלון קופץ אחרי סמן קלט.

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

תפריט של לחצני פעולה צפים

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

• קידום חלון קופץ מסוג manual באמצעות השיטה showPopover. זהו הלחצן הראשי.
• התפריט הוא חלון קופץ נוסף שמשמש לצורך לחיצה על הלחצן הראשי.
• התפריט נפתח עם popovertoggletarget.
• בעזרת autofocus אפשר להתמקד באפשרות הראשונה בתפריט בתצוגה.
• סגירת התפריט סוגרת את התפריט.
• סיבוב הסמלים משתמש ב-:has(). מידע נוסף על :has() זמין במאמר הזה.

זהו!

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

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

תודה שאמרת לנו!

תמונה מאת מדיסון אורן ב-Un שמוצגת