Source

מוֹדָלִי

השתמש בתוסף המודאלי של JavaScript של Bootstrap כדי להוסיף תיבות דו-שיח לאתר שלך עבור תיבות lightbox, התראות משתמשים או תוכן מותאם אישית לחלוטין.

איך זה עובד

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

  • מודלים בנויים עם HTML, CSS ו-JavaScript. הם ממוקמים מעל כל השאר במסמך ומסירים את הגלילה מהמסמך <body>כך שהתוכן המודאלי יגלול במקום זאת.
  • לחיצה על "רקע" המודאלית תסגור את המודאל באופן אוטומטי.
  • Bootstrap תומך רק בחלון מודאלי אחד בכל פעם. מודלים מקוננים אינם נתמכים מכיוון שאנו מאמינים שהם חוויות משתמש גרועות.
  • מודלים משתמשים ב- position: fixed, שלעיתים יכול להיות קצת ספציפי לגבי העיבוד שלו. במידת האפשר, הצב את ה-HTML המודאלי שלך במיקום ברמה העליונה כדי למנוע הפרעות פוטנציאליות מאלמנטים אחרים. סביר להניח שתיתקל בבעיות בעת קינון .modalבתוך אלמנט קבוע אחר.
  • שוב, עקב position: fixed, יש כמה אזהרות עם שימוש במודלים במכשירים ניידים. עיין במסמכי התמיכה בדפדפן שלנו לפרטים.
  • בשל האופן שבו HTML5 מגדיר את הסמנטיקה שלו, לתכונת autofocusHTML אין השפעה במודלי Bootstrap. כדי להשיג את אותו אפקט, השתמש ב-JavaScript מותאם אישית:
$('#myModal').on('shown.bs.modal', function () {
  $('#myInput').trigger('focus')
})

אפקט האנימציה של רכיב זה תלוי prefers-reduced-motionבשאילתת המדיה. עיין בסעיף תנועה מופחתת בתיעוד הנגישות שלנו .

המשך לקרוא לקבלת הדגמות והנחיות שימוש.

דוגמאות

להלן דוגמה מודאלית סטטיתposition (כלומר , והן displayנדחו). הכלולים הם הכותרת המודאלית, הגוף המודאלי (נדרש עבור padding), והכותרת התחתונה המודאלית (אופציונלי). אנו מבקשים ממך לכלול כותרות מודאליות עם פעולות דחייה במידת האפשר, או לספק פעולת דחייה מפורשת אחרת.

<div class="modal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <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">&times;</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" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <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">&times;</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" tabindex="-1" role="dialog" aria-labelledby="staticBackdropLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <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">&times;</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>

גלילה של תוכן ארוך

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

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalLong">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</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>

אתה יכול גם ליצור מודאל ניתן לגלילה המאפשר לגלול את הגוף המודאלי על ידי הוספה .modal-dialog-scrollableל .modal-dialog.

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalScrollable">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModalScrollable" tabindex="-1" role="dialog" aria-labelledby="exampleModalScrollableTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-scrollable" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalScrollableTitle">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</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>

מרוכז אנכית

הוסף .modal-dialog-centeredל .modal-dialogלמרכז אנכית את המודאל.

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalCenterTitle">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</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>

עצות כלים ופופ-אוברים

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

<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>

תוכן מודאלי משתנה

יש לך חבורה של כפתורים שכולם מפעילים את אותו מודאל עם תוכן מעט שונה? השתמש בתכונות HTMLevent.relatedTarget ( אולי דרך jQuery ) כדי לשנות את התוכן של המודאל בהתאם לאיזה כפתור לחצו.data-*

להלן הדגמה חיה ואחריה 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" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <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">&times;</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לפני אנימציית הדעיכה המודאלית, $modal-show-transformהמשתנה קובע את הטרנספורמציה של .modal-dialogבסוף הנפשת הדעיכה המודאלית.

אם אתה רוצה למשל אנימציית זום-אין, אתה יכול להגדיר $modal-fade-transform: scale(.8).

הסר אנימציה

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

<div class="modal" tabindex="-1" role="dialog" aria-labelledby="..." aria-hidden="true">
  ...
</div>

גבהים דינמיים

אם הגובה של מודאל משתנה בזמן שהוא פתוח, עליך להתקשר $('#myModal').modal('handleUpdate')כדי להתאים מחדש את מיקום המודאל למקרה שיופיע פס גלילה.

נְגִישׁוּת

הקפד להוסיף role="dialog"ו aria-labelledby="...", בהתייחסות לכותרת המודאלית, אל ואל .modalעצמו . בנוסף, תוכל לתת תיאור של הדו-שיח המודאלי שלך עם ב- .role="document".modal-dialogaria-describedby.modal

הטמעת סרטוני יוטיוב

הטבעת סרטוני YouTube במודלים דורשת JavaScript נוסף שלא ב-Bootstrap כדי להפסיק את ההשמעה באופן אוטומטי ועוד. עיין בפוסט מועיל זה של Stack Overflow למידע נוסף.

גדלים אופציונליים

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

גודל מעמד רוחב מרבי מודאלי
קָטָן .modal-sm 300px
בְּרִירַת מֶחדָל אף אחד 500px
גָדוֹל .modal-lg 800px
גדול מאוד .modal-xl 1140px

מחלקת ברירת המחדל שלנו ללא שינוי מהווה את המודאל בגודל "בינוני".

<!-- Extra large modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-xl">Extra large modal</button>

<div class="modal fade bd-example-modal-xl" tabindex="-1" role="dialog" aria-labelledby="myExtraLargeModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-xl" role="document">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

<!-- Large modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-lg">Large modal</button>

<div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

<!-- Small modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-sm">Small modal</button>

<div class="modal fade bd-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-sm" role="document">
    <div class="modal-content">
      ...
    </div>
  </div>
</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.
מקלדת בוליאני נָכוֹן סוגר את המודאל בעת לחיצה על מקש Escape
מוֹקֵד בוליאני נָכוֹן שם את הפוקוס על המודאל בעת האתחול.
הופעה בוליאני נָכוֹן מציג את המודאל בעת אתחול.

שיטות

שיטות ומעברים אסינכרוניים

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

עיין בתיעוד JavaScript שלנו למידע נוסף .

.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ומבצעים לחיצה מחוץ למודאל או לחיצה על מקש בריחה.
$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})