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')
})

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

דוגמאות

להלן דוגמה מודאלית סטטית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-primary">Save changes</button>
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</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="#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-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="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>

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

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

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

הסר אנימציה

עבור מודלים שפשוט מופיעים במקום להתפוגג לצפייה, הסר את .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. גדלים אלה נכנסים לנקודות עצירה מסוימות כדי למנוע פסי גלילה אופקיים ביציאות תצוגה צרות יותר.

<!-- 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">
    <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">
    <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
מוֹקֵד	בוליאני	נָכוֹן	שם את הפוקוס על המודאל בעת האתחול.
הופעה	בוליאני	נָכוֹן	מציג את המודאל בעת אתחול.

שיטות

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

כל שיטות ה-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).

$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})