לחלונות קופצים למגוון רחב של מטרות שימושים רבים בבניית אתרים. בעזרתם ניתן ליצור סוגים שונים של תפריטים, להציב טקסטים וגרפיקה פרסומיים, טיפים לכלים בעת מילוי טפסים מורכבים, ונוח למקם את הטפסים עצמם בחלונות שאינם תופסים מקום בעמוד. במאמר שלנו תוכלו למצוא תיאור כיצד תוכלו ליצור חלון כזה.
זה הכרחי
ידע בסיסי ב- HTML
הוראות
שלב 1
קופץ, html, שכבה נסתרת
שלב 2
בדפים רבים באינטרנט תוכלו לראות כי ספריות מהודרות של מסגרות JavaScript שונות (jQuery, MooTools, Prototype וכו ') משמשות ליצירת חלונות קופצים בעמודים. עם זאת, למעשה, הם אינם נחוצים בעת פתרון בעיה מסוימת זו. הכלים הזמינים בשפת הסימון של Hypertext (HTML) ובגיליונות סגנון מדורגים (CSS) מספיקים ליצירת חלונות קופצים. החלונות שנוצרו בדרך זו יעבדו ללא קשר אם JavaScript מופעל בדפדפן המבקר.
ניתן להציב את כל הקוד שיוצר את הקופץ בשתי שורות. השורה הראשונה יוצרת קישור שיש ללחוץ עליו כדי להציג את הקופץ:
לחץ כאן!
כאן, התכונה onmouseover של תג הקישור מגדירה את סוג סמן העכבר המוגדר כברירת מחדל עבור קישורים. המאפיין onclick מציין שכאשר לוחצים על הקישור, גוש PopUp הנסתר אמור להיות גלוי.
השורה השנייה היא, למעשה, חלון הקופץ. שכבה עם מזהה PopUp וגודל החלון, צבע וגודל הטקסט, הרקע והגבול שצוינו במאפיין הסגנון:
זהו הטקסט בחלון הקופץ
זה לא נראה כברירת מחדל - זה מסומן על ידי בורר התצוגה עם ערך של שום בתיאור סגנון השכבה.
למעשה, זה כל מה שאתה צריך כדי ליצור חלון קופץ - מקם את שתי השורות האלה בין התגים לדף שלך והוא מוכן לצאת לדרך.
שלב 3
כדי שתוכל לסגור את חלון הקופץ מול התג, עליך להוסיף קישור המבצע את הפעולה ההפוכה - להסתיר את השכבה הגלויה עם מזהה PopUp:
סגור
שלב 4
ואם אתה רוצה שהחלון יצוץ לא על ידי לחיצה, אלא על ידי ריחוף על סמן העכבר, יש לשנות את השורה הראשונה עם הקישור בצורה כזו:
להזיז את העכבר לכאן!
שלב 5
עכשיו אתה מכיר את העיקרון והמבנה של קוד החלון המוקפץ, ועיצוב המראה והתוכן שלו תלוי לחלוטין במטרות ובדמיון שלך.
