in English

Модал

Васлкунаки модалии 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">
  <div class="modal-dialog">
    <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" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <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" data-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
  <div class="modal-dialog">
    <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>

Ҳаракати мундариҷаи дароз

Вақте ки модальҳо барои намоишгоҳи корбар ё дастгоҳ хеле дароз мешаванд, онҳо новобаста аз худи саҳифа ҳаракат мекунанд. Намунаи зерро санҷед, то бубинед, ки мо чӣ дар назар дорем.