Source

מאָדאַל

ניצן Bootstrap ס דזשאַוואַסקריפּט מאָדאַל פּלוגין צו לייגן דיאַלאָגס צו דיין פּלאַץ פֿאַר ליגהטבאָקסעס, באַניצער נאָוטאַפאַקיישאַנז אָדער גאָר מנהג אינהאַלט.

וויאזוי עס ארבעט

איידער איר אָנהייבן מיט Bootstrap ס מאָדאַל קאָמפּאָנענט, זיין זיכער צו לייענען די פאלגענדע ווייַל אונדזער מעניו אָפּציעס האָבן לעצטנס געביטן.

  • מאָדס זענען געבויט מיט HTML, CSS און דזשאַוואַסקריפּט. זיי זענען פּאַזישאַנד איבער אַלץ אַנדערש אין דעם דאָקומענט און באַזייַטיקן מעגילע פון ​​​​דעם <body>אַזוי אַז מאָדאַל אינהאַלט סקראָללס אַנשטאָט.
  • קליקינג אויף די מאָדאַל "באַקדראַפּ" וועט אויטאָמאַטיש פאַרמאַכן די מאָדאַל.
  • באָאָטסטראַפּ שטיצט בלויז איין מאָדאַל פֿענצטער אין אַ צייט. נעסטעד מאָדאַלז זענען נישט געשטיצט ווייַל מיר גלויבן זיי זענען נעבעך באַניצער יקספּיריאַנסיז.
  • מאָדאַלס נוצן position: fixed, וואָס קענען מאל זיין אַ ביסל באַזונדער וועגן זיין רענדערינג. ווען מעגלעך, שטעלן דיין מאָדאַל HTML אין אַ שפּיץ-מדרגה שטעלע צו ויסמיידן פּאָטענציעל ינטערפיראַנס פון אנדערע עלעמענטן. איר וועט מסתּמא לויפן אין ישוז ווען נעסטינג אַ .modalין אן אנדער פאַרפעסטיקט עלעמענט.
  • אַמאָל ווידער, רעכט צו position: fixed, עס זענען עטלעכע קייוויאַץ מיט די נוצן פון מאָדאַלז אויף רירעוודיק דעוויסעס. זען אונדזער בלעטערער שטיצן דאָקומענטן פֿאַר דעטאַילס.
  • רעכט צו ווי HTML5 דיפיינז זייַן סעמאַנטיקס, די autofocusHTML אַטריביוט האט קיין ווירקונג אין באָאָטסטראַפּ מאָדאַלז. צו דערגרייכן די זעלבע ווירקונג, נוצן עטלעכע מנהג דזשאַוואַסקריפּט:
$('#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-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="#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="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>

וועריינג מאָדאַל אינהאַלט

האָבן אַ בינטל פון קנעפּלעך וואָס אַלע צינגל די זעלבע מאָדאַל מיט אַ ביסל אַנדערש אינהאַלט? ניצן event.relatedTargetאון HTML data-*אַטריביוץ (עפשער דורך jQuery ) צו בייַטן די אינהאַלט פון די מאָדאַל דיפּענדינג אויף וואָס קנעפּל איז קליקט.

ונטער איז אַ לעבן דעמאָ נאכגעגאנגען דורך ביישפּיל HTML און דזשאַוואַסקריפּט. פֿאַר מער אינפֿאָרמאַציע, לייענען די מאָדאַל געשעענישן דאָקס פֿאַר דעטאַילס אויף 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-dialogזיך. דערצו, איר קענט געבן אַ באַשרייַבונג פון דיין מאָדאַל דיאַלאָג מיט aria-describedbyאויף .modal.

עמבעדדינג יאָוטובע ווידיאס

עמבעדדינג יאָוטובע ווידיאס אין מאָדאַלז ריקווייערז נאָך דזשאַוואַסקריפּט ניט אין באָאָטסטראַפּ צו אויטאָמאַטיש האַלטן פּלייבאַק און מער. זען דעם נוציק 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>

באַניץ

די מאָדאַל פּלוגין טאַגאַלז דיין פאַרבאָרגן אינהאַלט אויף פאָדערונג, דורך דאַטן אַטריביוץ אָדער דזשאַוואַסקריפּט. עס אויך מוסיף .modal-openצו די <body>אָווועררייד פעליקייַט סקראָללינג נאַטור און דזשענערייץ אַ .modal-backdropצו צושטעלן אַ גיט געגנט פֿאַר דימיסינג געוויזן מאָדאַלז ווען קליקינג אַרויס די מאָדאַל.

דורך דאַטן אַטריביוץ

אַקטאַווייט אַ מאָדאַל אָן שרייבן דזשאַוואַסקריפּט. שטעלן data-toggle="modal"אויף אַ קאָנטראָללער עלעמענט, ווי אַ קנעפּל, צוזאמען מיט אַ data-target="#foo"אָדער href="#foo"צו ציל אַ ספּעציפיש מאָדאַל צו טאַגאַל.

<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>

דורך דזשאַוואַסקריפּט

רופן אַ מאָדאַל מיט שייַן myModalמיט אַ איין שורה פון דזשאַוואַסקריפּט:

$('#myModal').modal(options)

אָפּציעס

אָפּציעס קענען זיין דורכגעגאנגען דורך דאַטן אַטריביוץ אָדער דזשאַוואַסקריפּט. פֿאַר דאַטן אַטריביוץ, צולייגן די אָפּציע נאָמען צו data-, ווי אין data-backdrop="".

נאָמען טיפּ פעליקייַט באַשרייַבונג
באַקדראַפּ באָאָלעאַן אָדער די שטריקל'static' אמת כולל אַ מאָדאַל-באַקדראַפּ עלעמענט. אַלטערנאַטיוועלי, ספּעציפיצירן staticפֿאַר אַ באַקדראַפּ וואָס טוט נישט פאַרמאַכן די מאָדאַל אויף גיט.
קיבארד בוליאַן אמת קלאָוזיז די מאָדאַל ווען אַנטלויפן שליסל איז געדריקט
פאָקוס בוליאַן אמת לייגט די פאָקוס אויף די מאָדאַל ווען ינישאַלייזד.
ווייַזן בוליאַן אמת ווייזט די מאָדאַל ווען ינישאַלייזד.

מעטהאָדס

אַסינטשראָנאָוס מעטהאָדס און טראַנזישאַנז

אַלע אַפּי מעטהאָדס זענען ייסינגקראַנאַס און אָנהייבן אַ יבערגאַנג . זיי צוריקקומען צו די קאַללער ווי באַלד ווי די יבערגאַנג איז סטאַרטעד אָבער איידער עס ענדס . אין אַדישאַן, אַ מעטאָד רופן אויף אַ יבערגאַנג קאָמפּאָנענט וועט זיין איגנאָרירט .

זען אונדזער דזשאַוואַסקריפּט דאַקיומענטיישאַן פֿאַר מער אינפֿאָרמאַציע.

.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פאַרמאָג פון די געשעעניש.
געוויזן.בס.מאָדאַל דער געשעעניש איז פייערד ווען די מאָדאַל איז געווען קענטיק צו דער באַניצער (וועט וואַרטן פֿאַר CSS טראַנזישאַנז צו פאַרענדיקן). אויב געפֿירט דורך אַ קליק, די קליקט עלעמענט איז בנימצא ווי די relatedTargetפאַרמאָג פון די געשעעניש.
hide.bs.modal דעם געשעעניש איז פייערד מיד ווען דער hideבייַשפּיל אופֿן איז גערופן.
hidden.bs.modal דער געשעעניש איז פייערד ווען די מאָדאַל איז פאַרטיק צו זיין פאַרבאָרגן פון די באַניצער (וועט וואַרטן פֿאַר CSS טראַנזישאַנז צו פאַרענדיקן).
$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})