צור חלון קופץ באמצעות HTML, CSS ו-JavaScript

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

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

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

מערכות הפעלה לא נמצאו חלונות 7

איפור של סרטון היום גלול כדי להמשיך עם התוכן

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

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

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

 <body> 
    <button class="open-modal">Hello!</button> 
 
    <div class="modal-content hidden-modal"> 
        <div class="modal-header"> 
            <h3>Meaning of Hello!</h3> 
            <button class="close-modal">&times;</button> 
        </div> 
 
        <div class="modal-body"> 
            <p>Hello is a greeting in the English language. It is used at 
            the start of a sentence as an introduction whether in person or 
           on the phone.</p> 
        </div> 
    </div>  
 
    <div class="blur-bg hidden-blur"></div> 
    <script src="script.js"></script> 
</body>

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

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

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

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

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

 * { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
    line-height: 1; 
} 
 
body { 
    height: 100%; 
    display: flex; 
    justify-content: center; 
    flex-direction: column; 
    align-items: center; 
    background: #000; 
    gap: 30px; 
}

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

 .open-modal { 
    background: #20c997; 
    color: #fff; 
    border: none; 
    padding: 20px 40px; 
    font-size: 48px; 
    border-radius: 100px; 
    cursor: pointer; 
    transition: all 0.3s; 
    outline: none; 
} 
 
.open-modal:active { 
    transform: translateY(-17px); 
}

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

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

 .modal-content { 
    background: #ccc; 
    width: 500px; 
    padding: 20px; 
    border-radius: 10px; 
    z-index: 99; 
} 
 
.modal-header { 
    display: flex; 
    justify-content: space-between; 
    margin-bottom: 16px; 
    color: #000; 
    font-size: 30px; 
} 
 
.modal-body p {  
   font-size: 22px; 
    line-height: 1.5;  
}  
 
.hidden-modal {  
   display: none;  
}

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

 .close-modal { 
    background: transparent; 
    border: none; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    height: 20px; 
    width: 20px; 
    font-size: 40px; 
} 
 
.close-modal:hover { 
    color: #fa5252; 
}

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

   
.blur-bg { 
    position: absolute; 
    top: 0; 
    left: 0; 
    height: 100%; 
    width: 100%; 
    background: rgba(0, 0, 0, 0.3); 
    backdrop-filter: blur(5px); 
} 
 
.hidden-blur { 
    display: none; 
}

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

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

האם ניתן לאתר טלפונים בתשלום מראש על ידי המשטרה

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

 let modalContent = document.querySelector(".modal-content"); 
let openModal = document.querySelector(".open-modal"); 
let closeModal = document.querySelector(".close-modal"); 
let blurBg = document.querySelector(".blur-bg");

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

 openModal.addEventListener("click", function () { 
    modalContent.classList.remove("hidden-modal"); 
    blurBg.classList.remove("hidden-blur"); 
});

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

 let closeModalFunction = function () { 
    modalContent.classList.add("hidden-modal") 
    blurBg.classList.add("hidden-blur") 
}

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

 blurBg.addEventListener("click", closeModalFunction); 
closeModal.addEventListener("click", closeModalFunction); 
 
document.addEventListener("keydown", function (event) { 
    if (event.key === "Escape" 
     && !modalContent.classList.contains("hidden") 
   ) { 
        closeModalFunction(); 
    } 
});

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

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

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

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

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

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

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