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

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

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

כתוב HTML כדי לבנות את התוכן

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

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

<גוּף>
<לַחְצָןמעמד="אופן פתוח">שלום!לַחְצָן>
<divמעמד="מודאלי-תוכן מוסתר-מודאלי">
<divמעמד="מודאל-header">
<h3>המשמעות של שלום!h3>
<לַחְצָןמעמד="קרוב-מודאלי">×לַחְצָן>
div>


<divמעמד="גוף מודאלי">
<ע>שלום זו ברכה בשפה האנגלית. הוא משמש ב
 תחילתו של משפט כהקדמה בין אם באופן אישי או
 בטלפון.ע>
div>
div>
<divמעמד="טשטוש-bg hidden-blur">div>
<תַסרִיטsrc="script.js">תַסרִיט>
גוּף>
instagram viewer

הדף אמור להופיע כך:

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

כתוב CSS כדי להוסיף סגנון

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

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

* {
שולים: 0;
ריפוד: 0;
גודל קופסא: תיבת גבול;
גובה קו: 1;
}
גוּף {
גוֹבַה: 100%;
לְהַצִיג: לְהַגמִישׁ;
להצדיק-תוכן: מֶרְכָּז;
כיוון הגמיש: טור;
align-items: מֶרְכָּז;
רקע כללי: #000;
פער: 30פיקסלים;
}

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

.אופן פתוח {
רקע כללי: #20c997;
צֶבַע: #fff;
גבול: אף אחד;
ריפוד: 20פיקסלים 40פיקסלים;
גודל גופן: 48פיקסלים;
גבול-רדיוס: 100פיקסלים;
סַמָן: מַצבִּיעַ;
מַעֲבָר: את כל 0.3 שניות;
מתווה: אף אחד;
}
.אופן פתוח:פָּעִיל {
שינוי צורה: לתרגםY(-17 פיקסלים);
}

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

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

.modal-content {
רקע כללי: #ccc;
רוֹחַב: 500פיקסלים;
ריפוד: 20פיקסלים;
גבול-רדיוס: 10פיקסלים;
z-index: 99;
}
.modal-header {
לְהַצִיג: לְהַגמִישׁ;
להצדיק-תוכן: רווח-בין;
שוליים-תחתית: 16פיקסלים;
צֶבַע: #000;
גודל גופן: 30פיקסלים;
}


.modal-bodyע { 
גודל גופן: 22פיקסלים;
גובה קו: 1.5; 
} 
.hidden-modal { 
לְהַצִיג: אף אחד; 
}

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

.close-modal {
רקע כללי: שָׁקוּף;
גבול: אף אחד;
לְהַצִיג: לְהַגמִישׁ;
align-items: מֶרְכָּז;
להצדיק-תוכן: מֶרְכָּז;
גוֹבַה: 20פיקסלים;
רוֹחַב: 20פיקסלים;
גודל גופן: 40פיקסלים;
}
.close-modal:לְרַחֵף {
צֶבַע: #fa5252;
}

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


.blur-bg {
עמדה: מוּחלָט;
חלק עליון: 0;
שמאלה: 0;
גוֹבַה: 100%;
רוֹחַב: 100%;
רקע כללי: rgba(0, 0, 0, 0.3);
מסנן רקע: לְטַשׁטֵשׁ(5פיקסלים);
}
.hidden-blur {
לְהַצִיג: אף אחד;
}

לאחר הוספת ה-CSS, הדף אמור להיראות כך:

שלוט בחלון הקופץ עם קוד JavaScript

אתה תשתמש ב-JavaScript כדי לפתוח ולסגור את החלון המודאלי על ידי הצגה או הסתרה שלו. לְהוֹסִיף מאזיני אירועים ללחצן כדי להפעיל אותו להיפתח ולסגור כאשר אתה לוחץ עליו.

תחילה בחר את האלמנטים הרלוונטיים באמצעות מחלקות ה-CSS שהגדרת ב-HTML:

לתת modalContent = מסמך.querySelector(".modal-content");
לתת openModal = מסמך.querySelector(".open-modal");
לתת closeModal = מסמך.querySelector(".close-modal");
לתת blurBg = מסמך.querySelector(".blur-bg");

הוסף מאזין אירועים ל- מודאלי פתוח לחצן כך שיפתח את החלון כאשר תלחץ עליו.

openModal.addEventListener("נְקִישָׁה", פוּנקצִיָה () {
 modalContent.classList.remove("נסתר-מודאלי");
 blurBg.classList.remove("טשטוש מוסתר");
});

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

לתת closeModalFunction = פוּנקצִיָה () {
 modalContent.classList.add("נסתר-מודאלי")
 blurBg.classList.add("טשטוש מוסתר")
}

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

blurBg.addEventListener("נְקִישָׁה", closeModalFunction);
closeModal.addEventListener("נְקִישָׁה", closeModalFunction);
מסמך.addEventListener("הורדת מקשים", פוּנקצִיָה (מִקרֶה) {
אם (event.key "בריחה"
 && !modalContent.classList.contains("מוּסתָר")
 ) {
 closeModalFunction();
 }
});

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

שימושים של חלונות קופצים

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

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