דף הבית » עיצוב אתרים » - דינמית מודאלית באמת תוסף חלון

    - דינמית מודאלית באמת תוסף חלון

    חלונות מודאלית ביותר נראה להסיח את הדעת ולהטריד את המבקר עם שדות opt-in ו עסקאות לא רצויות. מודלים אלה לעתים קרובות להשתלט על כל הדף, נראה נורא, ואינם מציעים דרך ברורה לסגור את החלון. תודה לאל, iziModal.js הוא ההפך הגמור.

    זה אחד plugle חלון sleekest חלון ראיתי אי פעם וזה מקבל אותי נרגש לתקשר עם מודלס שוב.

    iziModal.js הוא תוסף אז אתה צריך עותק של ספריית jQuery בשביל זה לעבוד. אבל זה די קל ואתה יכול אפילו כולל את הספרייה חיצונית מ CDNJS.

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

    אתה יכול למצוא שפע של דוגמאות on CodePen אבל אני באמת אוהב את הדגמות מתארח על דף הבית של iziModal. באופן ספציפי, לבדוק את אפשרות הטמעה של iframe שם יש נגן Vimeo הפעלה אוטומטית בתור בתור מודאלי.

    העיצוב הוא מפואר ואת מודאלי באמת מרגיש כמו שזה חלק ממשק. איכות האנימציה מרשימה מדי, וזה כל מופעל עם CSS3 & jQuery.

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

     $ (document). ('click', '.trigger', function (event) event.preventDefault (); $ ('# modal') iziModal ('open');); 

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

    זהו פרוייקט מסיבי להפליא וזה בקלות אחד המועדפים שלי modal חלון תוספים מ עיצוב ושימושיות.

    כדי לתפוס עותק של המקור, אתה יכול גם למשוך אותו דרך npm או הורד מ - GitHub. ואם יש לך הצעות על תוסף או רק רוצה לשתף את התודה שלך אתה יכול ציוץ היוצר מרסלו דולצ'ה @ Marcelodolce.