in English

Мадальны

Выкарыстоўвайце мадальны плагін JavaScript ад Bootstrap, каб дадаць на ваш сайт дыялогавыя вокны для лайтбоксаў, апавяшчэнняў карыстальнікаў або цалкам карыстацкага кантэнту.

Як гэта працуе

Перш чым пачаць працу з мадальным кампанентам 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>

Пракрутка доўгага кантэнту

Калі мадалы становяцца занадта доўгімі для вобласці прагляду або прылады карыстальніка, яны пракручваюцца незалежна ад самой старонкі. Паспрабуйце дэманстрацыю ніжэй, каб зразумець, што мы маем на ўвазе.