in English

Модаль

Жарық жәшіктері, пайдаланушы хабарландырулары немесе толығымен реттелетін мазмұн үшін сайтыңызға диалогтар қосу үшін 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>

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

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

Модаль денесін қосу арқылы айналдыруға мүмкіндік беретін айналдырылатын модальды жасауға .modal-dialog-scrollableболады .modal-dialog.

<!-- Scrollable modal -->
<div class="modal-dialog modal-dialog-scrollable">
  ...
</div>

Тігінен орталықтандырылған

Модальді тігінен ортаға қосу .modal-dialog-centeredүшін қосыңыз..modal-dialog

<!-- Vertically centered modal -->
<div class="modal-dialog modal-dialog-centered">
  ...
</div>

<!-- Vertically centered scrollable modal -->
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
  ...
</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" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <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" aria-labelledby="..." aria-hidden="true">
  ...
</div>

Динамикалық биіктіктер

Егер модальдың биіктігі ашық тұрған кезде өзгерсе, $('#myModal').modal('handleUpdate')айналдыру жолағы пайда болған жағдайда модаль орнын қайта реттеу үшін қоңырау шалу керек.

Қол жетімділік

aria-labelledby="..."Модальды тақырыпқа сілтеме жасай отырып, міндетті түрде қосыңыз .modal. Оған қоса, модальды диалогтың сипаттамасын aria-describedbyon арқылы бере аласыз .modal. role="dialog"Біз оны JavaScript арқылы қосып қойғандықтан , қосудың қажеті жоқ екенін ескеріңіз .

YouTube бейнелерін ендіру

YouTube бейнелерін модальдарға ендіру үшін ойнатуды автоматты түрде тоқтату және т.б. үшін Bootstrap қолданбасында емес қосымша JavaScript қажет. Қосымша ақпарат алу үшін осы пайдалы Stack Overflow жазбасын қараңыз .

Қосымша өлшемдер

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

Өлшем Сынып Модальдық максималды ені
Кішкентай .modal-sm 300px
Әдепкі Жоқ 500px
Үлкен .modal-lg 800px
Өте үлкен .modal-xl 1140px

Біздің модификатор класы жоқ әдепкі модаль "орташа" өлшемді модальды құрайды.

<div class="modal-dialog modal-xl">...</div>
<div class="modal-dialog modal-lg">...</div>
<div class="modal-dialog modal-sm">...</div>

Қолданылуы

Модальды плагин сұрау бойынша деректер атрибуттары немесе JavaScript арқылы жасырын мазмұнды ауыстырады. Ол сондай-ақ әдепкі айналдыру әрекетін қайта анықтауға қосады және .modal-openмодальдан тыс басқанда көрсетілген модальдарды алып тастау үшін басу аймағын қамтамасыз ету үшін a жасайды.<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 арқылы

myModalJavaScript бір жолымен идентификаторы бар модальды шақырыңыз :

$('#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 ауысуларының аяқталуын күтеді).
hidePrevented.bs.modal Бұл оқиға модаль көрсетілгенде, оның фонында staticжәне модальдан тыс шерту немесе escape пернесін басу пернетақта опциясымен орындалғанда немесе data-keyboardпараметріне орнатылғанда іске қосылады false. 
$('#myModal').on('hidden.bs.modal', function (event) {
  // do something...
})