בעזרת קוד Javascript אתם יכולים להציג לגולשים באתר שלכם את שלושת סוגי חלוניות ההודעה הקופצות המובנות בשפה: הודעה פשוטה, הודעה הדורשת מהמשתמש ללחוץ על כפתור "כן" או "לא" והודעה שבה נדרש המשתמש להשיב על שאלה.
כדי להציג את ההודעות נעשה שימוש בפונקציה Alert ובפונקציה Prompt וכן בפונקציה Confirm שהן פונקציות מובנות בשפת Javascript.
ראשית אראה כיצד להציג הודעה פשוטה למשתמש שביכולתו לסגור לאחר שילחץ על כפתור ה - "OK". בהודעות מסוג זה נשתמש כאשר ברצוננו להציג למשתמש אינפורמציה מסוימת או כאשר ברצוננו להזהירו מפני משהו.
דוגמת קוד לפונקציה כללית להצגת הודעה קופצת פשוטה:
<!DOCTYPE HTML>
<html>
<head>
<script language="JavaScript" type="text/javascript">
function MessageBox(Message)
{
alert(Message);
}
</script>
</head>
<body>
<input type="button" onclick="MessageBox('Hello World')" value="Click Me" />
</body>
</html>
בדוגמה למעלה יצרנו פונקציה ששמה MessageBox המקבלת טקסט כלשהו כפרמטר ומציגה אותו בחלונית קופצת. כדי לסגור סוג זה של הודעה על המשתמש ללחוץ על הכפתור OK המובנה בחלונית ההודעה.
בדוגמה הבאה אציג פונקציה בשם ConfirmBox המקבלת שאלה כלשהי כפרמטר ומציגה אותה למשתמש באמצעות חלונית קופצת שעליה שני כפתורים: OK ו - Cancel. המשתמש נדרש ללחוץ על אחד משני כפתורים אלה כדי לסגור את ההודעה והערך של הכפתור שנלחץ מוחזר לפונקציה שקראה לחלונית ההודעה
דוגמת קוד לפונקציה כללית להצגת הודעה קופצת מסוג כן / לא
<!DOCTYPE HTML>
<html>
<head>
<script language="JavaScript" type="text/javascript">
function ConfirmBox(question)
{
var q=confirm(question);
if (q==true)
{
alert("The OK button was clicked");
}
else
{
alert("The Cancel button was clicked");
}
}
</script>
</head>
<body>
<input type="button" onclick="ConfirmBox('Select OK or Cancel')" value="Click Me" />
</body>
</html>
ההודעה הקופצת הבאה שאדגים במאמר זה היא הודעה שבה מתבקש המשתמש להזין את תשובתו על שאלה שאותה הוא נשאל. תשובת המשתמש מוחזרת לפונקציה שקראה לחלונית ההודעה.
דוגמת קוד לפונקציה כללית להצגת שאלה למשתמש וקבלת תשובה מילולית
<!DOCTYPE HTML>
<html>
<head>
<script language="JavaScript" type="text/javascript">
function InputBox(question)
{
var q=prompt(question, "18");
if (q.length>0)
{
alert("Your age is: " + q);
}
}
</script>
</head>
<body>
<input type="button" onclick="InputBox('What is your age?')" value="Click Me" />
</body>
</html>
בדוגמת הקוד האחרונה השתמשנו בפונקציה המובנית prompt כדי להציג שאלה למשתמש. בדקנו האם המשתמש השיב על השאלה באמצעות בדיקת אורך התשובה. יש לציין שבמקרה שהמשתמש בחר ללחוץ על הכפתור Cancel יתקבל Null כתשובה.
את ההודעות השונות ניתן לעצב בעזרת קוד CSS וכמובן בעזרת HTML5 אולם זהו כבר נושא למאמר נפרד.