יצירת חלון קופץ ב- HTML נעשית באמצעות ספריית jQuery, המאפשרת לשלב מטפל באירועים בדף אינטרנט ובכך לאפשר להציג את התוכן הפעיל של האתר.
הוראות
שלב 1
פתח את עמוד האתר שלך ב- HTML בעורך הטקסט שבו אתה משתמש כדי לכתוב את הקוד הרצוי. אתה יכול גם להשתמש בכלי השירות הרגיל של Windows Notepad כדי להכניס חלון קופץ. לשם כך לחץ באמצעות לחצן העכבר הימני על קובץ ה- HTML ובחר "פתח באמצעות" - "פנקס רשימות".
שלב 2
בחלק המסמך, צור שכבה שתטפל ב- jQuery:
שלב 3
אז עליך להגדיר את שם חלון הקופץ. לשם כך תוכלו להשתמש בכותרות ה- HTML המדורגות:
כותרת החלון
שלב 4
לאחר מכן, הגדר את הטקסט שיוצג בחלון באמצעות הסקריפט ליצירת פיסקה:
טֶקסט
שלב 5
לאחר מכן צור שכבה עם class close_win כדי לסגור את הקופץ לפני שתסגור את הידית הקודמת:
סגור חלון
שלב 6
כלול את ספריית jQuery בקובץ על ידי הוספת התג הנדרש בין מתארי המסמכים. לדוגמה:
שלב 7
לאחר מכן, הזן את הקוד כדי להציג את הקופץ:
$ (פונקציה () {
$ ('Show #'). הסתר ();
שלב 8
לאחר מכן, עליך לטפל באירוע שהמשתמש לחץ על לחצן העכבר כדי להפעיל את חלון הקופץ ולטפל בסגירת החלון. לשם כך, הזן את הקוד הבא:
$ ('# Click-me'). לחץ על (function () {$ ('# show'). Fadein (300);})
$ ('# Close_win'). לחץ על (פונקציה () {$ ('# show'). FadeOut (300);})
& lt / script>})
תוכנית זו מטפלת במשתמש בלחיצת כפתורים להתקשרות לחלון הקופץ ולחיצה על הקישור כדי לסגור אותו.
שלב 9
כדי להציג את חלון הקופץ בדף, אתה יכול להשתמש בקישור של מחלקת הלחיצה עלי שצוין בקוד לעיל. לשם כך, הזן את הקוד הבא בגוף המסמך:
לחץ כדי להציג קופץ
