בניית פופאפ רספונסיבי ומונגש נראית מסובכת מנשוא, אבל לאחר שתקראו את הפוסט הזה – גם אתם תוכלו לבנות אחד כזה משלכם בלי בעיה.
ראשית נפרק את התהליך לשלבים:
ונתחיל מההתחלה
1. יצירת הHTML
הפופאפ שלנו בנוי מכמה אלמנטים:
- הפתור שפותח את הפופאפ. ממליצה להשתמש בתגית <button> ולא סתם תגית עם אירוע קליק. הסקריפטים יעבדו לנו טוב יותר בכל הדפדפנים והמכשירים הניידים, קורא המסך יבין את האלמנט נכון, ובסופו של דבר, זה פשוט מה שהתגית הזו – פשוט כפתור…
- אלמנט שאמור לכסות את כל העמוד בזמן שהפופאפ פתוח. הוא מתוח מקצה לקצה, נעוץ ולא נגלל עם העמוד, וצבעו שחור או לבן, עם שקיפות מסויימת, בהתאם לדרישות העיצוב. בדוגמא שלנו נקרא לו #popup_page_overlay.
- האלמנט של הפופאפ עצמו. בדרך כלל נעשה שימוש בתגית <div>. אלמנט זה אמור להיות גם הוא נעוץ למסך ולא יגלל, אך הוא לא מתוח לנו מקצה לקצה על המסך. בדוגמא שלנו נקרא לו #popup_wrap.
ועכשיו איך לבנות את זה-
תגית הכפתור – נמצאת במקום שבו אמור הכפתור להופיע מבחינת העיצוב.
התגית #popup_page_overlay תופיע איפשהו לקראת סוף תגית ה<body>, ובתוכה תופעה התגית של #popup_wrap. כן, בתוכה ולא אחריה כמו שנראה לחשוב…
2. הוספת הCSS
את הכפתור יש כמובן לעצב בהתאם לעיצוב.
האלמנט #popup_page_overlay – הרקע
נעבור על הדרישות שלנו מהאלמנט, כפי שפירטנו בסעיף הקודם:
- אמור להיות נעוץ ולא להגלל עם העמוד –
position: fixed; - אמור להיות מתוח מקצה לקצה לרוחב ולגובה המסך –
top: 0px; right: 0px; bottom: 0px; left: 0px; - כשהוא פתוח הוא אמור להיות מעל כל האלמנטים האחרים בעמוד, כולל תפריט ובאנרים, ולכן ניתן לו z-index גבוה מאד:
z-index: 9999; - אחרון חביב – אמור לקבל צבע רקע כלשהו. בדוגמה שלנו יקבל רקע אפור עם שקיפות קלה.
בנוסף, עד לרגע שהגולש לוחץ על הכפתור- אנחנו רוצים שהאלמנט יהיה מוסתר, לכן נוסיף לו opacity: 0; visibility: hidden; , הopacity כדי שנוכל להפעיל transition על הכניסה, וvisibility:hidden משום שopacity לבדוק לא מבטל את האלמנט לחלוטין על המסך, כך שמבחינת העכבר – האלמנט יהיה עדיין קיים וזה משהו שאנחנו לא רוצים. אכתוב על זה בהרחבה בהזדמנות.
אני לא משתמשת בdisplay: none שנראה ברור מאליו, כי אני רוצה שהשקיפות הזו תיכנס למסך עם עמעום ולא בבת אחת (קראו עוד על transitions).
האלמנט #popup_wrap – האלמנט של הפופאפ שלנו עצמו
ניתן לו רוחב בהתאם לדרישות העיצוב, ובמידה ויש צורך עיצובי – גם גובה בפיקסלים או באחוזים מגובה המסך. ניתן לעשות את זה באמצעות vh (קיצור של view height), וכן ניתן לו איזשהו צבע רקע שידגיש אותו על רקע האלמנט שתחתיו.
בנוסף צריך ליישר את הפופאפ לאמצע המסך. נשתמש בflex כדי לבצע את זה. את הflex נגדיר על האבא, הoverlay, ונוסיף הגדרת יישור לאמצע לאורך ולרוחב:
display: flex;
justify-content: center; /* horizonal alignment */
align-items: center; /* vertical alignment */בנוסף אין צורך לתת לאלמנט הפופאפ שלנו display: none וכדומה, מאחר והוא כבר נמצא בתוך אלמנט שלא נראה על המסך.
3. פתיחת הפופאפ בסקריפט
נורא פשוט. נוסיף אירוע קליק על הכפתור שלנו, שמוסיף לhtml קלאס כמו .popup_open.
שימו לב שעדיין לא רואים שינוי על המסך, כי לא הגדרנו מה יקרה לאלמנטים כשיש לhtml את הקלאס המדובר. אך אם תפתחו את כלי הפיתוח (developer tools) ותבדקו את הhtml – תוכלו לראות שנוסף לו הקלאס.
4. התאמת הCSS לפופאפ הפתוח
כעת כשיש לנו קלאס ייעודי עבור פופאפ פתוח, נוכל להגדיר את הCSSים המתאימים לאלמנטים של הפופאפ – הoverlay והwrap שבתוכו.
#popup_page_overlay
במצב הפתוח נרצה לדרוס לו את השקיפות ואת הvisibility: hidden. לכן נוסיף סלקטור חדש שמשמעותו היא – #popup_page_overlay כשהוא בן של .open_popup – כלומר, כשהוא אמור להיות פתוח.
.open_popup #popup_page_overlay{
opacity: 1;
visibility: visible;
}כעת לחיצה על הכפתור אכן פותחת את הפופאפ!!
אופס… רק איך ניתן לסגור אותו חזרה?!….
5. סקריפט סגירת הפופאפ
הסגירה היא בעצם ההיפך של הפתיחה –
jQuery('html').removeClass('popup_open');השאלה רק מתי צריך לסגור אותו. אז ככה:
- לחיצה על #popup_page_overlay
- לחיצה על כפתור סגירה בפופאפ עם ישנו אחד כזה.
כדי להקל להמשך נכניס את הסגירה לתוך פונקציה.
function closePopup(){
jQuery('html').removeClass('popup_open');
}וכעת נותר לנו להוסיף אירוע לחיצה כפי שהגדרנו למעלה, ובאירוע לשלוח לפונקציה. הנה כך:
jQuery('#popup_page_overlay').click(function(){closePopup();});
נוסיף לפופאפ כפתור סגירה, ונוסיף גם אותו לסקריפט שקורה לסגירת הפופאפ.
כעת הקסם עובד. הכפתור פותח, והoverlay וכפתור הX סוגרים. אממה, גם לחיצה על כל מקום בתוך הפופאפ שלנו תסגור אותו. וזה לחלוטין משהו לא רצוי… זה קורה בגלל הנושא של "ביעבוע כלפי מעלה" של אירועים. נצטרך להוסיף סקריפט שלחיצה על הפופאפ עצמו חוסמת את האירוע.
כך נראה הקוד הסופי שלנו לשלב הזה:
6. הוספת אנימציות
אנחנו רוצים להוסיף שתי אנימציות – פתיחת וסגירת הרקע האפור בfade, וכן כשהפופאפ נפתח – שיקבל אפקט קצר של עליה או ירידה.
הכנסת הרקע האפור עם fade
כזכור, הגדרנו לpopup_page_overlay את ההגדרות visibility hidden, opacity 0. האנימציה קורית על opacity, אבל גם עם הvisibility נצטרך לשחק. כשאין את האנימציה על הvisibility מה שיקרה זה שברגע של פתיחת הפופאפ הכל יעבוד נכון, הvisibility יעבור למצב visible ברגע הראשון, ומיד תהיה גם אנימציה על הopacity, מה שיגרום לרקע להכנס עם fade. אבל בסגירה זה לא יעבוד נכון, כי שוב הvisibility יעבור למצב של hidden מיד, עוד לפני שנספיק לראות את אנימצית ההעלמות של הopacity. לכן נוסיף גם את הvisibility להגדרת הtransition, לצורך הוספת delay. זה עובד כך:
במצב הסגור, שזה מטפל במה שיקרה כשהפופאפ נסגר נגדיר כך:
transition: opacity 0.35s, visibility 0s .35s;
מה שזה יגרום זה שהאופסיטי – החלק של האנימציה מקבל duration – משך זמן של 0.35 שניה, והvisibility יקבל את הhidden רק אחרי 0.35 שניה, כך הוא ימתין להעלמות שלו עד אחרי שהאופסיטי יסיים לעבוד. למצב הפתוח, שמטפל בפתיחת הפופאפ נוסיף בסך הכל:
transition-delay: 0s;
מה שיגרום שבפתיחה לא יהיה דיליי, לא תהיה המתנה לvisibility והוא יקרה מיד, כך שנראה טוב את האפקט של האופסיטי קורה.
הוספת אפקט עליה/ירידה לפופאפ בעת כניסה/יציאה
כאן נשתמש בהגדרת הCSS3 שנקראת transform, וליצר דיוק בערך translateY שהוא מקבל. ההגדרה translate משמעותה תזוזה של האלמנט. יש תזוזה אנכית (Y) ויש תזוזה אופקית (X). יש גם אפשרות לשלב, ואפשרויות נוספות, אבל לא נדון בהם עכשיו. בכל מקרה אנחנו משתמשים בtranslateY. בתוך הסוגריים צריך לומר לו כמה להזיז את הפופאפ, באחוזים מגובהו. מספר חיובי יוריד את הפופאפ כלפי מטה, ומספר שלילי יעלה את הפופאפ למעלה. אנחנו נשחק בין translateY(15%( לבין none, ובנוסף יש להוסיף כמובן transition על הגדרת הtransform החדשה שלנו.
כאן מופיע הקוד והתוצאה (יכול להיות שהפופאפ לא ייפתח כי הסקריפטים לא עובדים לעיתים כשזה מוטמע באתר. פתחו בחלון מלא של codepen כדי לצפות בפופאפ בפעולה)
סיימנו! יש לכם עכשיו פופאפ עובד שלתוכו תוכלו להכניס כל תוכן שהוא מטקסט ועד טפסים, תמונות ואייפריים.
הפוסט הזה ילמד אתכם איך להנגיש את הפופאפ שבנינו, כך שיותאם לניווט מקלדת וקורא מסך.
בהצלחה!!