Source

Модаль

Жарық жәшіктері, пайдаланушы хабарландырулары немесе толығымен реттелетін мазмұн үшін сайтыңызға диалогтар қосу үшін 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" role="dialog">
  <div class="modal-dialog" role="document">
    <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" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <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" tabindex="-1" role="dialog" aria-labelledby="staticBackdropLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <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>

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

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

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalLong">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">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>

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

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalScrollable">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModalScrollable" tabindex="-1" role="dialog" aria-labelledby="exampleModalScrollableTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-scrollable" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalScrollableTitle">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>

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

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

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalCenterTitle">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>

Кеңестер мен қалқымалы терезелер

Құрал кеңестері мен қалқандарды қажетінше модальдар ішінде орналастыруға болады. Модальдер жабылған кезде, ішіндегі кез келген кеңестер мен қалқымалы элементтер де автоматты түрде жабылады.

<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" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <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" role="dialog" aria-labelledby="..." aria-hidden="true">
  ...
</div>

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

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

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

Модаль тақырыбына сілтеме жасай отырып, role="dialog"және қосуды ұмытпаңыз , -ге және өзіне . Оған қоса, модальды диалогтың сипаттамасын on арқылы бере аласыз .aria-labelledby="...".modalrole="document".modal-dialogaria-describedby.modal

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

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

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

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

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

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

<!-- Extra large modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-xl">Extra large modal</button>

<div class="modal fade bd-example-modal-xl" tabindex="-1" role="dialog" aria-labelledby="myExtraLargeModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-xl" role="document">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

<!-- Large modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-lg">Large modal</button>

<div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

<!-- Small modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-sm">Small modal</button>

<div class="modal fade bd-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-sm" role="document">
    <div class="modal-content">
      ...
    </div>
  </div>
</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 пернесін басқанда модальды жаппайтын фон үшін көрсетіңіз.
пернетақта логикалық рас 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 пернесін басқанда орындалады. 
$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})