השתמש בתוסף המודאלי של JavaScript של Bootstrap כדי להוסיף תיבות דו-שיח לאתר שלך עבור תיבות lightbox, התראות משתמשים או תוכן מותאם אישית לחלוטין.
איך זה עובד
לפני שתתחיל עם הרכיב המודאלי של Bootstrap, הקפד לקרוא את הדברים הבאים שכן אפשרויות התפריט שלנו השתנו לאחרונה.
מודלים בנויים עם HTML, CSS ו-JavaScript. הם ממוקמים מעל כל השאר במסמך ומסירים את הגלילה מהמסמך <body>כך שהתוכן המודאלי יגלול במקום זאת.
לחיצה על "רקע" המודאלית תסגור את המודאל באופן אוטומטי.
Bootstrap תומך רק בחלון מודאלי אחד בכל פעם. מודלים מקוננים אינם נתמכים מכיוון שאנו מאמינים שהם חוויות משתמש גרועות.
מודלים משתמשים ב- position: fixed, שלעיתים יכול להיות קצת ספציפי לגבי העיבוד שלו. במידת האפשר, הצב את ה-HTML המודאלי שלך במיקום ברמה העליונה כדי למנוע הפרעות פוטנציאליות מאלמנטים אחרים. סביר להניח שתיתקל בבעיות בעת קינון .modalבתוך אלמנט קבוע אחר.
בשל האופן שבו HTML5 מגדיר את הסמנטיקה שלו, לתכונת ה- autofocusHTML אין השפעה במודלי Bootstrap. כדי להשיג את אותו האפקט, השתמש ב-JavaScript מותאם אישית:
להלן דוגמה מודאלית סטטיתposition (כלומר , והן displayנדחו). הכלולים הם הכותרת המודאלית, הגוף המודאלי (נדרש עבור padding), והכותרת התחתונה המודאלית (אופציונלי). אנו מבקשים ממך לכלול כותרות מודאליות עם פעולות דחייה במידת האפשר, או לספק פעולת דחייה מפורשת אחרת.
כותרת מודאלית
טקסט גוף מודאלי נכנס לכאן.
דמו ישיר
החלף הדגמה מודאלית עובדת על ידי לחיצה על הכפתור למטה. הוא יחליק מטה ויימוג מהחלק העליון של העמוד.
Modal title
Woohoo, you're reading this text in a modal!
רקע סטטי
כאשר רקע מוגדר לסטטי, המודאל לא ייסגר בעת לחיצה מחוצה לו. לחץ על הכפתור למטה כדי לנסות את זה.
Modal title
I will not close if you click outside me. Don't even try to press escape key.
גלילה של תוכן ארוך
כאשר המודלים הופכים ארוכים מדי עבור נקודת התצוגה או המכשיר של המשתמש, הם גוללים ללא תלות בעמוד עצמו. נסה את ההדגמה למטה כדי לראות למה אנחנו מתכוונים.
Modal title
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
אתה יכול גם ליצור מודאל ניתן לגלילה המאפשר לגלול את הגוף המודאלי על ידי הוספה .modal-dialog-scrollableל .modal-dialog.
Modal title
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
מרוכז אנכית
הוסף .modal-dialog-centeredל .modal-dialogלמרכז אנכית את המודאל.
Modal title
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Modal title
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
עצות כלים ופופ-אוברים
ניתן למקם עצות כלים ופופ-אובר בתוך מודלים לפי הצורך . כאשר המודלים סגורים, כל עצות הכלים והפופ-אובר בפנים נמחקים גם הם באופן אוטומטי.
השתמש במערכת הרשת Bootstrap בתוך מודאל על ידי קינון .container-fluidבתוך ה- .modal-body. לאחר מכן, השתמש במחלקות מערכת הרשת הרגילות כפי שהיית עושה בכל מקום אחר.
המשתנה $modal-fade-transformקובע את מצב הטרנספורמציה של .modal-dialogלפני אנימציית ה-Fade-in המודאלית, $modal-show-transformהמשתנה קובע את הטרנספורמציה של .modal-dialogבסוף הנפשה המודאלית.
אם אתה רוצה למשל אנימציית זום-אין, אתה יכול להגדיר $modal-fade-transform: scale(.8).
הסר אנימציה
עבור מודלים שפשוט מופיעים במקום להתפוגג לצפייה, הסר את .fadeהכיתה מהסימון המודאלי שלך.
גבהים דינמיים
אם הגובה של מודאל משתנה בזמן שהוא פתוח, עליך להתקשר $('#myModal').modal('handleUpdate')כדי להתאים מחדש את מיקום המודאל למקרה שיופיע פס גלילה.
נְגִישׁוּת
הקפד להוסיף aria-labelledby="..."את , תוך התייחסות לכותרת המודאלית, ל .modal. בנוסף, תוכל לתת תיאור של הדו-שיח המודאלי שלך עם aria-describedbyב- .modal. שים לב שאינך צריך להוסיף role="dialog"מכיוון שכבר הוספנו אותו באמצעות JavaScript.
הטמעת סרטוני יוטיוב
הטבעת סרטוני YouTube במודלים דורשת JavaScript נוסף שלא ב-Bootstrap כדי להפסיק את ההשמעה באופן אוטומטי ועוד. עיין בפוסט מועיל זה של Stack Overflow למידע נוסף.
גדלים אופציונליים
למודלים יש שלושה גדלים אופציונליים, הזמינים באמצעות מחלקות שינוי למיקום על .modal-dialog. גדלים אלה נכנסים לנקודות עצירה מסוימות כדי למנוע פסי גלילה אופקיים ביציאות תצוגה צרות יותר.
גודל
מעמד
רוחב מרבי מודאלי
קָטָן
.modal-sm
300px
בְּרִירַת מֶחדָל
אף אחד
500px
גָדוֹל
.modal-lg
800px
גדול מאוד
.modal-xl
1140px
מחלקת ברירת המחדל שלנו ללא שינוי מהווה את המודאל בגודל "בינוני".
Extra large modal
...
Large modal
...
Small modal
...
נוֹהָג
התוסף המודאלי מחליף את התוכן המוסתר שלך לפי דרישה, באמצעות תכונות נתונים או JavaScript. זה גם מוסיף לעקוף .modal-openאת <body>התנהגות הגלילה המוגדרת כברירת מחדל ומייצר .modal-backdropאזור לחיצה לביטול מודלים המוצגים בעת לחיצה מחוץ למודאל.
באמצעות תכונות נתונים
הפעל מודאל מבלי לכתוב JavaScript. הגדר data-toggle="modal"על רכיב בקר, כמו כפתור, יחד עם data-target="#foo"או href="#foo"כדי למקד מודאל ספציפי למעבר.
דרך JavaScript
התקשר למודאל עם מזהה myModalעם שורה אחת של JavaScript:
אפשרויות
ניתן להעביר אפשרויות באמצעות תכונות נתונים או JavaScript. עבור תכונות נתונים, הוסף את שם האפשרות ל- data-, כמו ב- data-backdrop="".
שֵׁם
סוּג
בְּרִירַת מֶחדָל
תיאור
רקע
בוליאן או המחרוזת'static'
נָכוֹן
כולל אלמנט רקע מודאלי. לחלופין, ציין staticעבור רקע שאינו סוגר את המודאל בלחיצה.
מקלדת
בוליאני
נָכוֹן
סוגר את המודאל בעת לחיצה על מקש Escape
מוֹקֵד
בוליאני
נָכוֹן
שם את הפוקוס על המודאל בעת האתחול.
הופעה
בוליאני
נָכוֹן
מציג את המודאל בעת אתחול.
שיטות
שיטות ומעברים אסינכרוניים
כל שיטות ה-API הן אסינכרוניות ומתחילות מעבר . הם חוזרים למתקשר ברגע שהמעבר מתחיל אבל לפני שהוא מסתיים . בנוסף, תתעלם מקריאת שיטה על רכיב מעבר .
מפעיל את התוכן שלך כמודל. מקבל אפשרויות אופציונליות object.
.modal('toggle')
מחליף מודאל באופן ידני. חוזר אל המתקשר לפני שהמודאל הוצג או הוסתר בפועל (כלומר לפני התרחשות האירוע shown.bs.modalאו ).hidden.bs.modal
.modal('show')
פותח מודאל באופן ידני. חוזר אל המתקשר לפני שהמודאל הוצג בפועל (כלומר לפני shown.bs.modalהתרחשות האירוע).
.modal('hide')
מסתיר מודאל באופן ידני. חוזר אל המתקשר לפני שהמודאל הוסתר בפועל (כלומר לפני hidden.bs.modalהתרחשות האירוע).
.modal('handleUpdate')
כוונן מחדש ידנית את מיקום המודאל אם גובהו של המודאל משתנה בזמן שהוא פתוח (כלומר במקרה שמופיע פס גלילה).
.modal('dispose')
הורס את המודאל של אלמנט.
אירועים
המחלקה המודאלית של Bootstrap חושפת כמה אירועים לחיבור לפונקציונליות מודאלית. כל האירועים המודאליים נורים לעבר המודאל עצמו (כלומר לעבר ה- <div class="modal">).
סוג אירוע
תיאור
show.bs.modal
אירוע זה מופעל מיד כאשר showשיטת המופע נקראת. אם נגרם מקליק, הרכיב שנלחץ זמין כמאפיין relatedTargetשל האירוע.
מוצג.bs.modal
אירוע זה מופעל כאשר המודאל נעשה גלוי למשתמש (יחכה לסיום מעברי CSS). אם נגרם מקליק, הרכיב שנלחץ זמין כמאפיין relatedTargetשל האירוע.
hide.bs.modal
אירוע זה מופעל מיד כאשר hideשיטת המופע נקראה.
hidden.bs.modal
אירוע זה מופעל כאשר המודאל סיים להיות מוסתר מהמשתמש (יחכה לסיום מעברי CSS).
hidePrevented.bs.modal
אירוע זה מופעל כאשר המודאל מוצג, הרקע שלו הוא staticולחיצה מחוץ למודאל או לחיצה על מקש בריחה מתבצעת עם אפשרות המקלדת או data-keyboardמוגדרת ל false.