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

Бул компоненттин анимация эффектиси 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>

Узун мазмунду жылдыруу

Модалдар колдонуучунун көрүү портуна же түзмөгүнө өтө узун болуп калганда, алар беттин өзүнөн көз карандысыз сыдырышат. Эмнени айткыбыз келгенин билүү үчүн төмөндөгү демонстрацияны байкап көрүңүз.