מוֹדָלִי
השתמש בתוסף המודאלי של JavaScript של Bootstrap כדי להוסיף תיבות דו-שיח לאתר שלך עבור תיבות lightbox, התראות משתמשים או תוכן מותאם אישית לחלוטין.
איך זה עובד
לפני שתתחיל עם הרכיב המודאלי של Bootstrap, הקפד לקרוא את הדברים הבאים שכן אפשרויות התפריט שלנו השתנו לאחרונה.
- מודלים בנויים עם HTML, CSS ו-JavaScript. הם ממוקמים מעל כל השאר במסמך ומסירים את הגלילה מהמסמך
<body>
כך שהתוכן המודאלי יגלול במקום זאת. - לחיצה על "רקע" המודאלית תסגור את המודאל באופן אוטומטי.
- Bootstrap תומך רק בחלון מודאלי אחד בכל פעם. מודלים מקוננים אינם נתמכים מכיוון שאנו מאמינים שהם חוויות משתמש גרועות.
- מודלים משתמשים ב-
position: fixed
, שלעיתים יכול להיות קצת ספציפי לגבי העיבוד שלו. במידת האפשר, הצב את ה-HTML המודאלי שלך במיקום ברמה העליונה כדי למנוע הפרעות פוטנציאליות מאלמנטים אחרים. סביר להניח שתיתקל בבעיות בעת קינון.modal
בתוך אלמנט קבוע אחר. - שוב, עקב
position: fixed
, יש כמה אזהרות עם שימוש במודלים במכשירים ניידים. עיין במסמכי התמיכה בדפדפן שלנו לפרטים. - בשל האופן שבו HTML5 מגדיר את הסמנטיקה שלו, לתכונת
autofocus
HTML אין השפעה במודלי Bootstrap. כדי להשיג את אותו אפקט, השתמש ב-JavaScript מותאם אישית:
$('#myModal').on('shown.bs.modal', function () {
$('#myInput').trigger('focus')
})
prefers-reduced-motion
בשאילתת המדיה. עיין
בסעיף תנועה מופחתת בתיעוד הנגישות שלנו .
המשך לקרוא לקבלת הדגמות והנחיות שימוש.
דוגמאות
רכיבים מודאליים
להלן דוגמה מודאלית סטטיתposition
(כלומר , והן display
נדחו). הכלולים הם הכותרת המודאלית, הגוף המודאלי (נדרש עבור padding
), והכותרת התחתונה המודאלית (אופציונלי). אנו מבקשים ממך לכלול כותרות מודאליות עם פעולות דחייה במידת האפשר, או לספק פעולת דחייה מפורשת אחרת.
<div class="modal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Modal body text goes here.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
דמו ישיר
החלף הדגמה מודאלית עובדת על ידי לחיצה על הכפתור למטה. הוא יחליק מטה ויימוג מהחלק העליון של העמוד.
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
רקע סטטי
כאשר רקע מוגדר לסטטי, המודאל לא ייסגר בעת לחיצה מחוצה לו. לחץ על הכפתור למטה כדי לנסות את זה.
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#staticBackdrop">
Launch static backdrop modal
</button>
<!-- Modal -->
<div class="modal fade" id="staticBackdrop" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="staticBackdropLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Understood</button>
</div>
</div>
</div>
</div>
גלילה של תוכן ארוך
כאשר המודלים הופכים ארוכים מדי עבור נקודת התצוגה או המכשיר של המשתמש, הם גוללים ללא תלות בעמוד עצמו. נסה את ההדגמה למטה כדי לראות למה אנחנו מתכוונים.
אתה יכול גם ליצור מודאל ניתן לגלילה המאפשר לגלול את הגוף המודאלי על ידי הוספה .modal-dialog-scrollable
ל .modal-dialog
.
<!-- Scrollable modal -->
<div class="modal-dialog modal-dialog-scrollable">
...
</div>
מרוכז אנכית
הוסף .modal-dialog-centered
ל .modal-dialog
למרכז אנכית את המודאל.
<!-- Vertically centered modal -->
<div class="modal-dialog modal-dialog-centered">
...
</div>
<!-- Vertically centered scrollable modal -->
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
...
</div>
עצות כלים ופופ-אוברים
ניתן למקם עצות כלים ופופ-אובר בתוך מודלים לפי הצורך . כאשר המודלים סגורים, כל עצות הכלים והפופ-אובר בפנים נמחקים גם הם באופן אוטומטי.
<div class="modal-body">
<h5>Popover in a modal</h5>
<p>This <a href="#" role="button" class="btn btn-secondary popover-test" title="Popover title" data-content="Popover body content is set in this attribute.">button</a> triggers a popover on click.</p>
<hr>
<h5>Tooltips in a modal</h5>
<p><a href="#" class="tooltip-test" title="Tooltip">This link</a> and <a href="#" class="tooltip-test" title="Tooltip">that link</a> have tooltips on hover.</p>
</div>
שימוש ברשת
השתמש במערכת הרשת Bootstrap בתוך מודאל על ידי קינון .container-fluid
בתוך ה- .modal-body
. לאחר מכן, השתמש במחלקות מערכת הרשת הרגילות כפי שהיית עושה בכל מקום אחר.
<div class="modal-body">
<div class="container-fluid">
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 ml-auto">.col-md-4 .ml-auto</div>
</div>
<div class="row">
<div class="col-md-3 ml-auto">.col-md-3 .ml-auto</div>
<div class="col-md-2 ml-auto">.col-md-2 .ml-auto</div>
</div>
<div class="row">
<div class="col-md-6 ml-auto">.col-md-6 .ml-auto</div>
</div>
<div class="row">
<div class="col-sm-9">
Level 1: .col-sm-9
<div class="row">
<div class="col-8 col-sm-6">
Level 2: .col-8 .col-sm-6
</div>
<div class="col-4 col-sm-6">
Level 2: .col-4 .col-sm-6
</div>
</div>
</div>
</div>
</div>
</div>
תוכן מודאלי משתנה
יש לך חבורה של כפתורים שכולם מפעילים את אותו מודאל עם תוכן מעט שונה? השתמש event.relatedTarget
ותכונות HTMLdata-*
( אפשר דרך jQuery ) כדי לשנות את התוכן של המודאל בהתאם לאיזה כפתור לחצו.
להלן הדגמה חיה ואחריה HTML ו-JavaScript לדוגמה. למידע נוסף, קרא את מסמכי האירועים המודליים לפרטים על relatedTarget
.
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">Open modal for @mdo</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@fat">Open modal for @fat</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@getbootstrap">Open modal for @getbootstrap</button>
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">New message</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="recipient-name" class="col-form-label">Recipient:</label>
<input type="text" class="form-control" id="recipient-name">
</div>
<div class="form-group">
<label for="message-text" class="col-form-label">Message:</label>
<textarea class="form-control" id="message-text"></textarea>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Send message</button>
</div>
</div>
</div>
</div>
$('#exampleModal').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget) // Button that triggered the modal
var recipient = button.data('whatever') // Extract info from data-* attributes
// If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
// Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
var modal = $(this)
modal.find('.modal-title').text('New message to ' + recipient)
modal.find('.modal-body input').val(recipient)
})
שנה אנימציה
המשתנה $modal-fade-transform
קובע את מצב הטרנספורמציה של .modal-dialog
לפני אנימציית ה-Fade-in המודאלית, $modal-show-transform
המשתנה קובע את הטרנספורמציה של .modal-dialog
בסוף הנפשה המודאלית.
אם אתה רוצה למשל אנימציית זום-אין, אתה יכול להגדיר $modal-fade-transform: scale(.8)
.
הסר אנימציה
עבור מודלים שפשוט מופיעים במקום להתפוגג לצפייה, הסר את .fade
הכיתה מהסימון המודאלי שלך.
<div class="modal" tabindex="-1" aria-labelledby="..." aria-hidden="true">
...
</div>
גבהים דינמיים
אם הגובה של מודאל משתנה בזמן שהוא פתוח, עליך להתקשר $('#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 |
מחלקת ברירת המחדל שלנו ללא שינוי מהווה את המודאל בגודל "בינוני".
<div class="modal-dialog modal-xl">...</div>
<div class="modal-dialog modal-lg">...</div>
<div class="modal-dialog modal-sm">...</div>
נוֹהָג
התוסף המודאלי מחליף את התוכן המוסתר שלך לפי דרישה, באמצעות תכונות נתונים או JavaScript. זה גם מוסיף לעקוף .modal-open
את <body>
התנהגות הגלילה המוגדרת כברירת מחדל ומייצר .modal-backdrop
אזור לחיצה לביטול מודלים המוצגים בעת לחיצה מחוץ למודאל.
באמצעות תכונות נתונים
הפעל מודאל מבלי לכתוב JavaScript. הגדר data-toggle="modal"
על רכיב בקר, כמו כפתור, יחד עם data-target="#foo"
או href="#foo"
כדי למקד מודאל ספציפי למעבר.
<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>
דרך JavaScript
התקשר למודאל עם מזהה myModal
עם שורה אחת של JavaScript:
$('#myModal').modal(options)
אפשרויות
ניתן להעביר אפשרויות באמצעות תכונות נתונים או JavaScript. עבור תכונות נתונים, הוסף את שם האפשרות ל- data-
, כמו ב- data-backdrop=""
.
שֵׁם | סוּג | בְּרִירַת מֶחדָל | תיאור |
---|---|---|---|
רקע | בוליאן או המחרוזת'static' |
נָכוֹן | כולל אלמנט רקע מודאלי. לחלופין, ציין static עבור רקע שאינו סוגר את המודאל בלחיצה. |
מקלדת | בוליאני | נָכוֹן | סוגר את המודאל בעת לחיצה על מקש Escape |
מוֹקֵד | בוליאני | נָכוֹן | שם את הפוקוס על המודאל בעת האתחול. |
הופעה | בוליאני | נָכוֹן | מציג את המודאל בעת אתחול. |
שיטות
שיטות ומעברים אסינכרוניים
כל שיטות ה-API הן אסינכרוניות ומתחילות מעבר . הם חוזרים למתקשר ברגע שהמעבר מתחיל אבל לפני שהוא מסתיים . בנוסף, תתעלם מקריאת שיטה על רכיב מעבר .
.modal(options)
מפעיל את התוכן שלך כמודל. מקבל אפשרויות אופציונליות object
.
$('#myModal').modal({
keyboard: false
})
.modal('toggle')
מחליף מודאל באופן ידני. חוזר אל המתקשר לפני שהמודאל הוצג או הוסתר בפועל (כלומר לפני התרחשות האירוע shown.bs.modal
או ).hidden.bs.modal
$('#myModal').modal('toggle')
.modal('show')
פותח מודאל באופן ידני. חוזר אל המתקשר לפני שהמודאל הוצג בפועל (כלומר לפני shown.bs.modal
התרחשות האירוע).
$('#myModal').modal('show')
.modal('hide')
מסתיר מודאל באופן ידני. חוזר אל המתקשר לפני שהמודאל הוסתר בפועל (כלומר לפני hidden.bs.modal
התרחשות האירוע).
$('#myModal').modal('hide')
.modal('handleUpdate')
כוונן מחדש ידנית את מיקום המודאל אם גובהו של המודאל משתנה בזמן שהוא פתוח (כלומר במקרה שמופיע פס גלילה).
$('#myModal').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 . |
$('#myModal').on('hidden.bs.modal', function (event) {
// do something...
})