Source

Modal

Bootstrap نىڭ JavaScript مودېل قىستۇرمىسىنى ئىشلىتىپ تور بېتىڭىزگە نۇر ساندۇقى ، ئىشلەتكۈچى ئۇقتۇرۇشى ياكى پۈتۈنلەي خاس مەزمۇندىكى دىئالوگ قوشۇڭ.

قانداق ئىشلەيدۇ

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>

Live demo

تۆۋەندىكى كۇنۇپكىنى بېسىش ئارقىلىق خىزمەت مودىلىنى كۆرسەت. ئۇ سىيرىلىپ بەتنىڭ ئۈستىدىن سۇسلاپ كېتىدۇ.

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

تورنى ئىشلىتىش

.container-fluidBootstrap تور سىستېمىسىنى مودېلنىڭ ئىچىدە ئۇۋا سېلىش ئارقىلىق ئىشلىتىڭ .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 ۋە 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 فىلىملىرىنى قىستۇرۇش

YouTube فىلىملىرىنى مودېلغا قىستۇرۇش Bootstrap دا ئەمەس قوشۇمچە JavaScript تەلەپ قىلىدۇ ۋە قويۇشنى ئاپتوماتىك توختىتىدۇ. تېخىمۇ كۆپ ئۇچۇرغا ئېرىشىش ئۈچۈن بۇ پايدىلىق Stack Overflow يازمىسىنى كۆرۈڭ.

ئىختىيارى چوڭلۇق

مودېللارنىڭ ئىككى خىل ئىختىيارى چوڭلۇقى بار ، ئۆزگەرتىش سىنىپى ئارقىلىق A غا قويغىلى بولىدۇ .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 بىلەن id بىلەن مودېلغا تېلېفون قىلىڭ :

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

تاللانما

تاللانمىلارنى سانلىق مەلۇمات خاسلىقى ياكى JavaScript ئارقىلىق يەتكۈزگىلى بولىدۇ. سانلىق مەلۇمات خاسلىقى ئۈچۈن ، تاللاش نامىغا data-ئوخشاش data-backdrop="".

ئىسمى	تىپ	سۈكۈتتىكى	چۈشەندۈرۈش
ئارقا كۆرۈنۈش	boolean or string`'static'`	true	مودېل ئارقا كۆرۈنۈش ئېلېمېنتىنى ئۆز ئىچىگە ئالىدۇ. `static`ئۇنىڭدىن باشقا ، چېكىشتە مودېلنى تاقىمايدىغان ئارقا كۆرۈنۈشنى بەلگىلەڭ .
كۇنۇپكا تاختىسى	boolean	true	قېچىش كۇنۇپكىسى بېسىلغاندا مودېلنى تاقايدۇ
فوكۇس نۇقتىسى	boolean	true	دەسلەپكى قەدەمدە فوكۇسنى مودېلغا قويىدۇ.
show	boolean	true	قوزغالغاندا مودېلنى كۆرسىتىدۇ.

Methods

ماس قەدەمسىز ئۇسۇل ۋە ئۆتكۈنچى

بارلىق API ئۇسۇللىرى ماس قەدەمسىز بولۇپ ، ئۆتكۈنچى باسقۇچنى باشلايدۇ . ئۇلار بۇرۇلۇش باشلانغان ھامان ، ئۇ ئاخىرلاشماي تۇرۇپلا تېلېفون قىلغۇچىغا قايتىپ كېلىدۇ . بۇنىڭدىن باشقا ، ئۆتكۈنچى زاپچاسنى چاقىرىش ئۇسۇلىغا سەل قارىلىدۇ .

تېخىمۇ كۆپ ئۇچۇرغا ئېرىشىش ئۈچۈن JavaScript ھۆججىتىمىزنى كۆرۈڭ.

`.modal(options)`

مەزمۇنلىرىڭىزنى مودېل سۈپىتىدە قوزغىتىدۇ. ئىختىيارى تاللاشلارنى قوبۇل قىلىدۇ object.

$('#myModal').modal({
  keyboard: false
})

`.modal('toggle')`

قولدا مودېلنى ئالماشتۇرىدۇ. مودېل ئەمەلىيەتتە كۆرسىتىش ياكى يوشۇرۇشتىن بۇرۇن (يەنى ۋەقە ياكى ۋەقە يۈز بېرىشتىن بۇرۇن) دەۋەتچىگە قايتىدۇ .shown.bs.modalhidden.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')`

ئېلېمېنتنىڭ مودىلىنى بۇزىدۇ.

Events

Bootstrap نىڭ مودېل سىنىپى مودېل ئىقتىدارغا باغلىنىش ئۈچۈن بىر قانچە ۋەقەنى ئاشكارىلىدى. بارلىق مودېل ھادىسىلىرى مودېلنىڭ ئۆزىدە (يەنى <div class="modal">).

پائالىيەت تىپى	چۈشەندۈرۈش
show.bs.modal	`show`مىسال ئۇسۇلى چاقىرىلغاندا بۇ ھادىسە دەرھال ئېتىلىدۇ . ئەگەر چېكىشتىن كېلىپ چىققان بولسا ، چەككەن ئېلېمېنت `relatedTarget`پائالىيەتنىڭ خاسلىقى سۈپىتىدە بولىدۇ.
shown.bs.modal	بۇ ھادىسە مودېلنى ئىشلەتكۈچىگە كۆرۈنگەندە چىقىرىۋېتىلىدۇ (CSS ئۆتكۈنچى باسقۇچنىڭ تاماملىنىشىنى ساقلايدۇ). ئەگەر چېكىشتىن كېلىپ چىققان بولسا ، چەككەن ئېلېمېنت `relatedTarget`پائالىيەتنىڭ خاسلىقى سۈپىتىدە بولىدۇ.
hide.bs.modal	`hide`مىسال ئۇسۇلى چاقىرىلغاندا بۇ پائالىيەت دەرھال ئېتىۋېتىلىدۇ .
hidden.bs.modal	بۇ ھادىسە مودېل ئىشلەتكۈچىگە يوشۇرۇنغاندىن كېيىن چىقىرىلىدۇ (CSS ئۆتكۈنچى باسقۇچنىڭ تاماملىنىشىنى ساقلايدۇ).

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