חינם JavaScript

אתה יכול למצוא שפע של מודלים CSS טהור אבל אלו לא מציעים את אותה שליטה כמו JavaScript. עם מודאלית JavaScript, אתה יכול להוסיף הנפשות מותאמות אישית, קלט UI, ובאמת לשפר את חוויית המשתמש.

אבל, למה לעצב משהו מאפס מתי אתה יכול להשתמש בספריית JS? אספתי את הטוב ביותר סקריפט מודלי חינם JavaScript מופעל כאן תוכל לעיין ולעדכן את המועדפים שלך.

כל אלה הם לגמרי חופשי וקוד פתוח, כך שתוכל לערוך את הקוד ואת resyle אותם כדי להתאים את האתר שלך לפי הצורך.

1. עקצוץ

אחד האהובים עלי חינם סקריפטים מודאלית היא Tingle.js. זה בנוי על וניל JavaScript ללא תלות, אז אתה לא צריך שום jQuery או Zepto ספריות.

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

Tingle.js נועד להיות נגיש ומגיב, כך שהוא פועל גם בהתקנים ניידים וגם תומך בדפדפנים ישנים יותר.

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

2. וניל Modal

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

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

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

3. רגיל

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

זה עושה לא להשתמש בכל CSS חיצוני או קבצי תמונה. רק אחד סקריפט JS יחיד הוא כל מה שאתה צריך.

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

בנוסף, אתה יכול להגדיר את מודאלית עם שורה אחת של JavaScript שמירה על הנושא המינימליסטי של תוסף זה.

4. Modaal

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

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

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

5. סקוטש JS מודאלית

צוות הפיתוח ב Scotch.io לפרסם הדרכות ומדריכים עבור coders. העבודה שלהם היא מדהימה וזה באמת מראה זה סקריפט מודאלי JavaScript, מתארח על GitHub סקוטש.

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

6. Bootbox.js

הדרך המהירה ביותר השקת פרויקט אינטרנט חדש היא דרך Bootstrap. זוהי מסגרת חזיתית חזקה המעודדת מפתחים ליצור תוספים משלהם לספריה.

דוגמה אחת כזו היא Bootbox.js, ספריית JavaScript קטנה, שנועד אך ורק עבור Windows מודאלית ב Bootstrap. זה בעצם עובד על תיבות דו שיח שבו המשתמש יכול ללחוץ על 'אישור' או על 'ביטול', בהתאם לבקשה שלך.

דיאלוגים אופייניים של JavaScript הם איומים, בדיוק כמו תיבות התראה. הסקריפט Bootbox מציעה חלופה מוצקה עבור כל עובד במערכת האקולוגית BS3 / BS4.

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

7. iziModal.js

אם אתה צריך פתרון קצת יותר אישית לבדוק iziModal.js. כלי זה הוא תגובה מלאה ואת תוכנן לעבוד בכל הדפדפנים המודרניים בצורה מושלמת.

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

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

8. jQuery מודאלית

ה תוסף מודול jQuery הוא אולי התסריט המודאלי הפשוט ביותר על jQuery שתמצא אי פעם.

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

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

9. PicoModal

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

זה תומך בכל הדפדפנים המודרניים, כולל דפדפנים ניידים עבור Android ו- Safari לנייד עבור iOS. הוא אפילו תומך בדפדפנים ישנים יותר של IE, המתוארכים ל- IE7!

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

10. ממוצע

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

לא כולם יעריכו את האנימציה הזו, אז אני לא יכול להגיד את זה התסריט יתאים לכל אתר. אבל, זה טהור וניל מודאלי וזה סופר קל להגדיר, עם רק CSS ו- JavaScriptה.

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

מילים סופיות

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