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

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.

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

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

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

<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

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

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

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

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

[popover=auto]/[popover]:

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

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

כאן אפשר לראות את המפרט. יהיה גם מילוי רב-פעמי עבור ממשק API זה.

דוגמאות

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

התראות

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

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

טוסטים

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

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

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

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

  • נעשה שימוש ב-[popover=auto]. הצגה של אחד מסתירה את האחרים כי הם לא ישות אב.
  • מוצג ב-pointerenter עם JavaScript.
  • מועמד מושלם נוסף לממשק ה-API של עיגון CSS.

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

  • נעשה שימוש ב[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. אם תשתמשו בה באופן הגיוני, היא תהיה תוספת מעולה לפלטפורמת האינטרנט.

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

תודה ש"קפצת"!

צילום של מדיסון אורן ב-UnFlood