איך בונים ThickBox?

מה זה ThickBox?

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

לכן בכדי לממש ThickBox צריך שני אובייקטים במסמך:

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

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

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

בניית אובייקט המיסוך:

כדי שהאובייקט יחסום את כל האירועים ויחסום את קבלת הפוקוס הוא צריך להיות מעל כל האובייקטים במסמך, ויזואלית, ולחסום את הפעפוע (bubbling) של האירוע כלפי מעלה. לכן ניתן לו position:absolute ו-width:100% ו-height:100% ונמקם אותו הכי גבוה (top:0;left:0) כך שיחסה את כל המסמך, ובנוסף ניתן לו z-index גבוה (נגיד 20) בשביל שיהיה מעל כל האלמנטים במסמך.
בכדי לחסום אירועים, צריך לתפוס אותם ובכולם לבטל את האירוע:

//For standard compliance browsers:
eventObject.preventDefault();
eventObject.stopPropagation();

//For Internet Explorer:
eventObject.returnValue = false;
eventObject.cancelBubble = true; 

בכדי לצבוע ולתת שקיפות משתמשים במאפיינים: opacity ו-background-color של CSS (עבור שקיפות ב-Internet Explorer יש להשתמש ב-CSS Filter).

בניית אובייקט החלון:

אובייקט החלון הוא בעצם אובייקט שנמצא ויזואלית מעל אובייקט המיסוך, כך שטכנית הוא יוכל לקבל אירועים, כי הוא נמצא מעל אובייקט המיסוך. לכן גם הוא יקבל position:absolute ו-z-index שיותר גבוה משל אובייקט המיסוך. ניתן לו top ו-left למקום שאנחנו רוצים. אם אנחנו רוצים במרכז המסך אז הנוסחא היא top:50% וmargin-top שלילי בגודל חצי מגובה האלמנט (offsetHeight).

בתוך אובייקט זה נשים את התוכן שאנחנו רוצים, webmaster.org.il למשל שמים iframe שמקשר לתוכן הרצוי. אתרים אחרים משתמשים בטכניקה זו בשביל גלריות ( מה שנקראlightbox).

מימושים קיימים:

MUI – מימוש שהכנתי לאובייקט כחלק מספריית ה-UI מבוססת MooTools שאני מפתח בזמני החופשי. בכדי להשתמש בו יש להוריד את הספרייה.