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

Jhey Tompkins

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

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

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

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

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

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

• האפשרות הזו מאפשרת להציג בקלות רכיב ואת רכיבי הצאצא שלו מעל שאר המסמך.
• לדאוג שהיא תהיה נגישה.
• לא נדרש JavaScript עבור רוב ההתנהגויות הנפוצות (סגירה קלה, singleton,‏ stacking וכו').

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

תאימות דפדפן

איפה אפשר להשתמש עכשיו ב-API המובנה של חלון קופץ? בזמן כתיבת המאמר הזה, התכונה נתמכת ב-Chrome Canary מאחורי הדגל Experimental web platform features.

כדי להפעיל את התכונה הניסיונית הזו, פותחים את Chrome Canary ועוברים אל chrome://flags. לאחר מכן מפעילים את התכונה הניסיונית Experimental web platform features.

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

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

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

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

פתרונות נוכחיים

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

Dialog.showModal();

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

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

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

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

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

זה כל מה שצריך.

<div id="my-first-popover" popover>Popover Content!</div>
<button popovertoggletarget="my-first-popover">Toggle Popover</button>

אבל מה קורה כאן?

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

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

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

לכפתור פעולה צף (FAB) זה יש מיקום קבוע עם ערך גבוה של z-index.

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

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

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

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

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

[popover] { display: block; }

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

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

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

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

אם רוצים להציג תוכן בתוך חלון קופץ באמצעות CSS grid או flexbox, כדאי להוסיף את התוכן בתוך רכיב. במקרה כזה, תצטרכו להגדיר כלל נפרד שישנה את display ברגע שהחלון הקופץ יהיה בשכבה העליונה. אם מגדירים אותו כברירת מחדל, הוא יוצג כברירת מחדל ויבטל את ההגדרה display: none.

[popover]:open {
 display: flex;
}

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

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

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

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

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

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

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

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

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

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

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

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

דוגמאות

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

התראות

ההדגמה הזו מציגה הודעה על העתקה ללוח העריכה.

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

הודעות קופצות

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

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

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

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

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

ניהול הרקעים

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

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

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

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

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

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

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

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

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

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

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

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

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

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

שומר מסך

בדומה להדגמה הקודמת, אפשר להוסיף לאתר שומר מסך.

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

סמן הטקסט עוקב

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

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

תפריט של כפתור פעולה צף (FAB)

הדגמה זו מראה איך אפשר להשתמש ב-popover כדי להטמיע תפריט של כפתור פעולה צף (FAB) בלי JavaScript.

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

זהו!

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

מומלץ לעיין במידע על ממשק משתמש פתוח. הסבר קצר על ה-API מתעדכן ככל שה-API מתפתח. כאן אפשר לראות את האוסף של כל ההדגמות.

תודה שקפצת לבקר!