Source

Модал

Васлкунаки модалии JavaScript-и Bootstrap-ро барои илова кардани муколамаҳо ба сайти худ барои қуттиҳои равшанӣ, огоҳиҳои корбар ё мундариҷаи комилан фармоишӣ истифода баред.

Он чӣ гуна кор мекунад

Пеш аз оғози кор бо ҷузъи модалии Bootstrap, боварӣ ҳосил кунед, ки зеринро хонед, зеро имконоти менюи мо ба наздикӣ тағир ёфтанд.

  • Модалҳо бо HTML, CSS ва JavaScript сохта шудаанд. Онҳо дар болои ҳама чизи дигаре дар ҳуҷҷат ҷойгир шудаанд ва ҳаракатро аз он хориҷ кунед, <body>то мундариҷаи модалӣ ба ҷои он ҳаракат кунад.
  • Ангуштзании модали "замина" ба таври худкор модалиро мепӯшонад.
  • Bootstrap дар як вақт танҳо як равзанаи модалиро дастгирӣ мекунад. Модалҳои дохилӣ дастгирӣ намешаванд, зеро мо боварӣ дорем, ки онҳо таҷрибаи ками корбаранд.
  • Модалҳо истифода мебаранд position: fixed, ки баъзан метавонад дар бораи намоиши он каме мушаххас бошад. То ҳадди имкон, HTML модалии худро дар сатҳи боло ҷойгир кунед, то аз дахолати эҳтимолӣ аз дигар унсурҳо канорагирӣ кунед. Эҳтимол шумо ҳангоми ҷойгир кардани як .modalэлементи собит дигар ба мушкилот дучор мешавед.
  • Бори дигар, аз сабаби position: fixed, баъзе огоҳиҳо дар бораи истифодаи модальҳо дар дастгоҳҳои мобилӣ вуҷуд доранд. Барои тафсилот ба ҳуҷҷатҳои дастгирии браузери мо нигаред.
  • Аз сабаби он ки чӣ тавр HTML5 семантикаи худро муайян мекунад, атрибути autofocusHTML дар modalҳои 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="#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 ва 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-dialogхуди. Илова бар ин, шумо метавонед тавсифи муколамаи модалии худро бо aria-describedbyon .modal.

Ҷойгиркунии видеоҳои YouTube

Ҷойгиркунии видеоҳои 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">
    <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">
    <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

Модалро бо ID 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...
})