מוֹדָלִי
השתמש בתוסף המודאלי של JavaScript של Bootstrap כדי להוסיף תיבות דו-שיח לאתר שלך עבור תיבות lightbox, התראות משתמשים או תוכן מותאם אישית לחלוטין.
איך זה עובד
לפני שתתחיל עם הרכיב המודאלי של Bootstrap, הקפד לקרוא את הדברים הבאים שכן אפשרויות התפריט שלנו השתנו לאחרונה.
- מודלים בנויים עם HTML, CSS ו-JavaScript. הם ממוקמים מעל כל השאר במסמך ומסירים את הגלילה מהמסמך
<body>
כך שהתוכן המודאלי יגלול במקום זאת. - לחיצה על "רקע" המודאלית תסגור את המודאל באופן אוטומטי.
- Bootstrap תומך רק בחלון מודאלי אחד בכל פעם. מודלים מקוננים אינם נתמכים מכיוון שאנו מאמינים שהם חוויות משתמש גרועות.
- מודלים משתמשים ב-
position: fixed
, שלעיתים יכול להיות קצת ספציפי לגבי העיבוד שלו. במידת האפשר, הצב את ה-HTML המודאלי שלך במיקום ברמה העליונה כדי למנוע הפרעות פוטנציאליות מאלמנטים אחרים. סביר להניח שתיתקל בבעיות בעת קינון.modal
בתוך אלמנט קבוע אחר. - שוב, עקב
position: fixed
, יש כמה אזהרות עם שימוש במודלים במכשירים ניידים. עיין במסמכי התמיכה בדפדפן שלנו לפרטים. - בשל האופן שבו HTML5 מגדיר את הסמנטיקה שלו, לתכונת ה-
autofocus
HTML אין השפעה במודלי Bootstrap. כדי להשיג את אותו האפקט, השתמש ב-JavaScript מותאם אישית:
var myModal = document.getElementById('myModal')
var myInput = document.getElementById('myInput')
myModal.addEventListener('shown.bs.modal', function () {
myInput.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="btn-close" data-bs-dismiss="modal" aria-label="Close"></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-bs-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-bs-toggle="modal" data-bs-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="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-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-bs-toggle="modal" data-bs-target="#staticBackdrop">
Launch static backdrop modal
</button>
<!-- Modal -->
<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-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="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-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-bs-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 ms-auto">.col-md-4 .ms-auto</div>
</div>
<div class="row">
<div class="col-md-3 ms-auto">.col-md-3 .ms-auto</div>
<div class="col-md-2 ms-auto">.col-md-2 .ms-auto</div>
</div>
<div class="row">
<div class="col-md-6 ms-auto">.col-md-6 .ms-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
HTML ו- HTMLdata-bs-*
כדי לשנות את התוכן של המודאל בהתאם לאיזה כפתור לחצו.
להלן הדגמה חיה ואחריה HTML ו-JavaScript לדוגמה. למידע נוסף, קרא את מסמכי האירועים המודליים לפרטים על relatedTarget
.
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" data-bs-whatever="@mdo">Open modal for @mdo</button>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" data-bs-whatever="@fat">Open modal for @fat</button>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" data-bs-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="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<form>
<div class="mb-3">
<label for="recipient-name" class="col-form-label">Recipient:</label>
<input type="text" class="form-control" id="recipient-name">
</div>
<div class="mb-3">
<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-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Send message</button>
</div>
</div>
</div>
</div>
var exampleModal = document.getElementById('exampleModal')
exampleModal.addEventListener('show.bs.modal', function (event) {
// Button that triggered the modal
var button = event.relatedTarget
// Extract info from data-bs-* attributes
var recipient = button.getAttribute('data-bs-whatever')
// If necessary, you could initiate an AJAX request here
// and then do the updating in a callback.
//
// Update the modal's content.
var modalTitle = exampleModal.querySelector('.modal-title')
var modalBodyInput = exampleModal.querySelector('.modal-body input')
modalTitle.textContent = 'New message to ' + recipient
modalBodyInput.value = recipient
})
החלף בין מודלים
החלף בין מודלים מרובים עם מיקום חכם של התכונות data-bs-target
ו . data-bs-toggle
לדוגמה, אתה יכול להחליף מודאל לאיפוס סיסמה מתוך מודאל כניסה שכבר פתוח. שימו לב שלא ניתן לפתוח מספר מודלים בו-זמנית - שיטה זו פשוט עוברת בין שני מודלים נפרדים.
<div class="modal fade" id="exampleModalToggle" aria-hidden="true" aria-labelledby="exampleModalToggleLabel" tabindex="-1">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalToggleLabel">Modal 1</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
Show a second modal and hide this one with the button below.
</div>
<div class="modal-footer">
<button class="btn btn-primary" data-bs-target="#exampleModalToggle2" data-bs-toggle="modal" data-bs-dismiss="modal">Open second modal</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="exampleModalToggle2" aria-hidden="true" aria-labelledby="exampleModalToggleLabel2" tabindex="-1">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalToggleLabel2">Modal 2</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
Hide this modal and show the first with the button below.
</div>
<div class="modal-footer">
<button class="btn btn-primary" data-bs-target="#exampleModalToggle" data-bs-toggle="modal" data-bs-dismiss="modal">Back to first</button>
</div>
</div>
</div>
</div>
<a class="btn btn-primary" data-bs-toggle="modal" href="#exampleModalToggle" role="button">Open first modal</a>
שנה אנימציה
המשתנה $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.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>
מודאל מסך מלא
עקיפה נוספת היא האפשרות להופיע מודאל המכסה את נקודת התצוגה של המשתמש, זמין באמצעות מחלקות משנה המוצבות על .modal-dialog
.
מעמד | זמינות |
---|---|
.modal-fullscreen |
תמיד |
.modal-fullscreen-sm-down |
לְהַלָן576px |
.modal-fullscreen-md-down |
לְהַלָן768px |
.modal-fullscreen-lg-down |
לְהַלָן992px |
.modal-fullscreen-xl-down |
לְהַלָן1200px |
.modal-fullscreen-xxl-down |
לְהַלָן1400px |
<!-- Full screen modal -->
<div class="modal-dialog modal-fullscreen-sm-down">
...
</div>
סאס
משתנים
$modal-inner-padding: $spacer;
$modal-footer-margin-between: .5rem;
$modal-dialog-margin: .5rem;
$modal-dialog-margin-y-sm-up: 1.75rem;
$modal-title-line-height: $line-height-base;
$modal-content-color: null;
$modal-content-bg: $white;
$modal-content-border-color: rgba($black, .2);
$modal-content-border-width: $border-width;
$modal-content-border-radius: $border-radius-lg;
$modal-content-inner-border-radius: subtract($modal-content-border-radius, $modal-content-border-width);
$modal-content-box-shadow-xs: $box-shadow-sm;
$modal-content-box-shadow-sm-up: $box-shadow;
$modal-backdrop-bg: $black;
$modal-backdrop-opacity: .5;
$modal-header-border-color: $border-color;
$modal-footer-border-color: $modal-header-border-color;
$modal-header-border-width: $modal-content-border-width;
$modal-footer-border-width: $modal-header-border-width;
$modal-header-padding-y: $modal-inner-padding;
$modal-header-padding-x: $modal-inner-padding;
$modal-header-padding: $modal-header-padding-y $modal-header-padding-x; // Keep this for backwards compatibility
$modal-sm: 300px;
$modal-md: 500px;
$modal-lg: 800px;
$modal-xl: 1140px;
$modal-fade-transform: translate(0, -50px);
$modal-show-transform: none;
$modal-transition: transform .3s ease-out;
$modal-scale-transform: scale(1.02);
לוּלָאָה
מודלים רספונסיביים במסך מלא נוצרים באמצעות $breakpoints
המפה ולולאה ב- scss/_modal.scss
.
@each $breakpoint in map-keys($grid-breakpoints) {
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
$postfix: if($infix != "", $infix + "-down", "");
@include media-breakpoint-down($breakpoint) {
.modal-fullscreen#{$postfix} {
width: 100vw;
max-width: none;
height: 100%;
margin: 0;
.modal-content {
height: 100%;
border: 0;
@include border-radius(0);
}
.modal-header {
@include border-radius(0);
}
.modal-body {
overflow-y: auto;
}
.modal-footer {
@include border-radius(0);
}
}
}
}
נוֹהָג
התוסף המודאלי מחליף את התוכן המוסתר שלך לפי דרישה, באמצעות תכונות נתונים או JavaScript. זה גם עוקף את התנהגות הגלילה המוגדרת כברירת מחדל ומייצר .modal-backdrop
אזור לחיצה לביטול מודלים המוצגים בעת לחיצה מחוץ למודאל.
באמצעות תכונות נתונים
הפעל מודאל מבלי לכתוב JavaScript. הגדר data-bs-toggle="modal"
על רכיב בקר, כמו כפתור, יחד עם data-bs-target="#foo"
או href="#foo"
כדי למקד מודאל ספציפי למעבר.
<button type="button" data-bs-toggle="modal" data-bs-target="#myModal">Launch modal</button>
דרך JavaScript
צור מודאל עם שורה אחת של JavaScript:
var myModal = new bootstrap.Modal(document.getElementById('myModal'), options)
אפשרויות
ניתן להעביר אפשרויות באמצעות תכונות נתונים או JavaScript. עבור תכונות נתונים, הוסף את שם האפשרות ל- data-bs-
, כמו ב- data-bs-backdrop=""
.
שֵׁם | סוּג | בְּרִירַת מֶחדָל | תיאור |
---|---|---|---|
backdrop |
בוליאן או המחרוזת'static' |
true |
כולל אלמנט רקע מודאלי. לחלופין, ציין static עבור רקע שאינו סוגר את המודאל בלחיצה. |
keyboard |
בוליאני | true |
סוגר את המודאל בעת לחיצה על מקש Escape |
focus |
בוליאני | true |
שם את הפוקוס על המודאל בעת האתחול. |
שיטות
שיטות ומעברים אסינכרוניים
כל שיטות ה-API הן אסינכרוניות ומתחילות מעבר . הם חוזרים למתקשר ברגע שהמעבר מתחיל אבל לפני שהוא מסתיים . בנוסף, תתעלם מקריאת שיטה על רכיב מעבר .
אפשרויות מעבר
מפעיל את התוכן שלך כמודל. מקבל אפשרויות אופציונליות object
.
var myModal = new bootstrap.Modal(document.getElementById('myModal'), {
keyboard: false
})
לְמַתֵג
מחליף מודאל באופן ידני. חוזר אל המתקשר לפני שהמודאל הוצג או הוסתר בפועל (כלומר לפני התרחשות האירוע shown.bs.modal
או ).hidden.bs.modal
myModal.toggle()
הופעה
פותח מודאל באופן ידני. חוזר אל המתקשר לפני שהמודאל הוצג בפועל (כלומר לפני shown.bs.modal
התרחשות האירוע).
myModal.show()
כמו כן, ניתן להעביר אלמנט DOM כארגומנט שניתן לקבל באירועים המודאליים (כמאפיין relatedTarget
).
var modalToggle = document.getElementById('toggleMyModal') // relatedTarget
myModal.show(modalToggle)
להתחבא
מסתיר מודאל באופן ידני. חוזר אל המתקשר לפני שהמודאל הוסתר בפועל (כלומר לפני hidden.bs.modal
התרחשות האירוע).
myModal.hide()
handleUpdate
כוונן מחדש ידנית את מיקום המודאל אם גובהו של המודאל משתנה בזמן שהוא פתוח (כלומר במקרה שמופיע פס גלילה).
myModal.handleUpdate()
להיפטר
הורס את המודאל של אלמנט. (מסיר נתונים מאוחסנים ברכיב ה-DOM)
myModal.dispose()
getInstance
שיטה סטטית המאפשרת לך לקבל את המופע המודאלי המשויך לאלמנט DOM
var myModalEl = document.getElementById('myModal')
var modal = bootstrap.Modal.getInstance(myModalEl) // Returns a Bootstrap modal instance
getOrCreateInstance
שיטה סטטית המאפשרת לך לקבל את המופע המודאלי המשויך לרכיב DOM, או ליצור אחד חדש למקרה שהוא לא אותחל
var myModalEl = document.querySelector('#myModal')
var modal = bootstrap.Modal.getOrCreateInstance(myModalEl) // Returns a Bootstrap modal instance
אירועים
המחלקה המודאלית של Bootstrap חושפת כמה אירועים לחיבור לפונקציונליות מודאלית. כל האירועים המודאליים נורים לעבר המודאל עצמו (כלומר לעבר ה- <div class="modal">
).
סוג אירוע | תיאור |
---|---|
show.bs.modal |
אירוע זה מופעל מיד כאשר show שיטת המופע נקראת. אם נגרם מקליק, הרכיב שנלחץ זמין כמאפיין relatedTarget של האירוע. |
shown.bs.modal |
אירוע זה מופעל כאשר המודאל נעשה גלוי למשתמש (יחכה לסיום מעברי CSS). אם נגרם מקליק, הרכיב שנלחץ זמין כמאפיין relatedTarget של האירוע. |
hide.bs.modal |
אירוע זה מופעל מיד כאשרhide שיטת המופע נקראה. |
hidden.bs.modal |
אירוע זה מופעל כאשר המודאל סיים להיות מוסתר מהמשתמש (יחכה לסיום מעברי CSS). |
hidePrevented.bs.modal |
אירוע זה מופעל כאשר המודאל מוצג, הרקע שלו static ולחיצה מחוץ למודאל או לחיצה על מקש בריחה מתבצעת עם אפשרות המקלדת או data-bs-keyboard מוגדרת לfalse . |
var myModalEl = document.getElementById('myModal')
myModalEl.addEventListener('hidden.bs.modal', function (event) {
// do something...
})