Модаль

Жарық жәшіктері, пайдаланушы хабарландырулары немесе толығымен реттелетін мазмұн үшін сайтыңызға диалогтар қосу үшін Bootstrap JavaScript модальды плагинін пайдаланыңыз.

Бұл қалай жұмыс істейді

Bootstrap модальды құрамдас бөлігімен жұмысты бастамас бұрын, мәзір опциялары жақында өзгергендіктен, төмендегіні оқып шығыңыз.

Модальдер HTML, CSS және JavaScript көмегімен жасалған. Олар құжаттағы барлық басқа нәрселердің үстіне орналастырылады және оның <body>орнына модальды мазмұн айналдыру үшін айналдыруды алып тастайды.
Модальды «фон» түймесін басу модальды автоматты түрде жабады.
Bootstrap бір уақытта тек бір модальды терезені қолдайды. Кірістірілген модальдарға қолдау көрсетілмейді, өйткені олар нашар пайдаланушы тәжірибесі деп есептейміз.
Модальдар position: fixedкейде оны көрсетуге қатысты ерекше болуы мүмкін дегенді пайдаланады. Мүмкіндігінше, басқа элементтердің ықтимал кедергілерін болдырмау үшін модальды HTML-ді жоғарғы деңгейге қойыңыз. .modalБасқа бекітілген элементке кірістіру кезінде мәселелерге тап болуыңыз мүмкін .
Мобильді құрылғыларда модальдарды пайдалану кезінде тағы position: fixedда бірнеше ескертулер бар. Толық ақпаратты шолғышты қолдау құжаттарын қараңыз.
HTML5 өзінің семантикасын қалай анықтайтынына байланысты HTML autofocusтөлсипаты 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>

Ұзын мазмұнды айналдыру

Модальдер пайдаланушының көру порты немесе құрылғысы үшін тым ұзын болғанда, олар беттің өзінен тәуелсіз жылжиды. Біздің нені білдіретінімізді түсіну үшін төмендегі демонстрацияны қолданып көріңіз.