חלון קופץ ותיבת דו-שיח

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

<div id="my-popover" popover>My popover content</div>

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

שליטה בחלונות קופצים

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

באופן הצהרתי

אפשר לשלוט בבועות מידע באופן מלא ב-HTML, בלי להשתמש ב-JavaScript, באמצעות לחצנים (וקלט עם הסוג button) והמאפיין popovertarget.

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

<button popovertarget="my-popover">Toggle</button>

אפשר גם לציין אם לחצן צריך לפתוח או לסגור חלון קופץ באמצעות popovertargetaction="show" ו-popovertargetaction="hide".

באמצעות JavaScript

אפשר גם לשלוט ב-popover באמצעות JavaScript. זה שימושי כשרוצים להציג popover בתגובה למשהו אחר מלחיצה של משתמש על לחצן. כדי לעשות זאת, צריך לקבל את רכיב ה-popover ואז לקרוא ל-showPopover(), ל-hidePopover() או ל-togglePopover().

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

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

הצגת חלוניות קופצות אוטומטית

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

<div id="popover" popover>My popover</div>

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

חלונות קופצים ידניים

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

<div id="popover" popover="manual">My popover</div>

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

חלונות קופצים עם רמזים

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

<div id="popover" popover="hint">My popover</div>

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

מיקום חלון קופץ

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

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

יש שני שלבים למיקום עוגן: הגדרת רכיב העוגן ומיקום הרכיב ביחס לעוגן. המאפיין popover יכול לטפל בשלב הראשון, על ידי הגדרת עוגן משתמע בשבילכם. כשפותחים חלון קופץ באמצעות <button popovertarget>, הלחצן הוא העוגן המרומז. אם אתם פותחים חלון קופץ באמצעות JavaScript, אתם יכולים להגדיר את העוגן המרומז באמצעות האפשרות source.

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

סגנונות ואנימציות

פסאודו הרכיב ::backdrop

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

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

פסאודו המחלקה ‎ :popover-open

נניח שאתם רוצים להגדיר את הפריסה של התוכן בחלון הקופץ באמצעות CSS Grids. מוסיפים [popover]{ display: grid }, ופתאום כל החלונות הקופצים גלויים. הסיבה לכך היא שהחלונות הקופצים מוסתרים באמצעות display: none. אפשר להשתמש במחלקת ה-pseudo‏ :popover-open כדי להחיל סגנונות רק כשהחלון הקופץ פתוח.

[popover]{
/* Don't do this! All popovers will be visible.  */
  display: grid;
}

[popover]:popover-open {
/*  This will only affect open popovers. */
  display: grid;
}

המאפיין :popover-open שימושי גם כשמנפישים חלון קופץ.

הוספת אנימציה לחלונות קופצים

יש 3 שלבים באנימציה של חלון קופץ:

1. ‫@starting-style {popover:popover-open { } }-הסגנונות הראשוניים של החלון הקופץ ברגע שהוא גלוי. הערה: צריך להגדיר את זה בגיליון הסגנונות אחרי שלב 2.
2. ‫popover:popover-open { }-הסגנונות של החלון הקופץ כשהוא פתוח.
3. popover { }-הסגנונות שהחלון הקופץ עובר אליהם כשהוא נסגר.

כשחלון קופץ לא פתוח, הוא מוסתר באמצעות display: none. כדי להנפיש את המאפיין הזה, צריך להגדיר את transition-behavior: allow-discrete ולהוסיף את display לרשימת המאפיינים ב-transition.

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

אינטראקציות בין חלוניות קופצות

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

חלונות קופצים מוטמעים

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

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

אם רכיב המקור של ה-popover נמצא בתוך popover, הוא נוסף ל-stack. רכיב המקור מוגדר אוטומטית כשמשתמשים ב-popovertarget בלחצן, או באמצעות JavaScript על ידי הגדרת האפשרות source כשקוראים ל-.showPopover({source}) או ל-.togglePopover({source}).

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

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

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

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

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

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

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

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

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

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

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

בדיקת ההבנה