כיצד לבנות תיבת התראה של JavaScript או חלון קופץ

תיבות קופצות (או תיבות דו-שיח) הן חלונות מודלים המשמשים להודיע ​​או להזהיר את המשתמש, או לקבלת קלט מהמשתמש.

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

ישנם שלושה סוגים שונים של שיטות קופצות המשמשות ב- JavaScript: window.alert (), window.confirm () ו- window.prompt ().

עֵרָנִי

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

דוגמא:

window.alert("Welcome to our website");

לְאַשֵׁר

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

דוגמא:

var result = window.confirm('Are you sure?'); if (result === true) { window.alert('Okay, if you're sure.'); } else { window.alert('You seem uncertain.'); }

מיידי

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

דוגמא:

var age = prompt('How old are you?', '100');

אפשרויות עיצוב אחרות:

אם אתה לא מרוצה מחלונות הקופצים של JavaScript המוגדרים כברירת מחדל, תוכל להחליף בספריות ממשק משתמש שונות. לדוגמא, SweetAlert מספק תחליף נחמד למודלים של JavaScript רגילים. אתה יכול לכלול אותו ב- HTML שלך באמצעות CDN (רשת מסירת תוכן) ולהתחיל להשתמש.

התחביר הוא ככזה: swal(title, subtitle, messageType)

swal("Oops!", "Something went wrong on the page!", "error");

הקוד שלעיל יפיק את הקופץ הבא:

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

עוד מידע:

• חלון MDN.alert ()
• חלון MDN.confirm ()
• חלון MDN.prompt ()