Source

Модаль

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" 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>

Төрле модаль эчтәлек

Бераз модальне бераз төрле эчтәлек белән эшләтеп җибәрүче төймәләр бармы? Кайсы төймәгә басылганына карап модаль эчтәлеген үзгәртү өчен HTML атрибутларын кулланыгыз event.relatedTarget( мөгаен jQuery аша ).data-*

Түбәндә 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)
})

Анимацияне үзгәртү

Theзгәргеч модаль сүнгән анимация алдыннан үзгәрү $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"үзенә өстәп , онытмагыз . Өстәвенә, сез модаль диалогның тасвирламасын бирә аласыз .aria-labelledby="...".modalrole="document".modal-dialogaria-describedby.modal

YouTube видеоларын урнаштыру

YouTube видеоларын модальләргә урнаштыру Bootstrap'та булмаган өстәмә JavaScript таләп итә, уйнауны автоматик рәвештә туктату һәм башкалар. Күбрәк мәгълүмат алу өчен бу файдалы Stack Overflow постын карагыз .

Ихтимал зурлыклар

Модальләрнең өч өстәмә зурлыгы бар, модификатор класслары аша a .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кагарга өсти һәм модаль читенә чыккач күрсәтелгән модальләрне кире кагу өчен чирттерү өлкәсен тәэмин итә.<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ның бер сызыгы булган id белән модальгә шалтыратыгыз :

$('#myModal').modal(options)

Вариантлар

Вариантларны мәгълүмат атрибутлары яки JavaScript аша бирергә мөмкин. Мәгълүмат атрибутлары өчен вариант исемен data-өстәгез data-backdrop="".

Исем Тип Килешү Тасвирлау
фон буле яки кыл'static' дөрес Модаль-фон элементын үз эченә ала. Альтернатив рәвештә, staticбасу яки качу баскычында модальне япмаган фонны күрсәтегез.
клавиатура буле дөрес Качу ачкычы басылганда модальне япа
фокус буле дөрес Башланганда игътибарны модальгә куя.
шоу буле дөрес Башланганда модальне күрсәтә.

Методлар

Асинхрон ысуллар һәм күчү

Барлык API ысуллары да асинхрон һәм күчү башлый . Күчерелеш башлангач, ләкин ул беткәнче шалтыратучыга кире кайталар . Моннан тыш, күчү компонентына методик чакыру игътибарсыз калачак .

Күбрәк мәгълүмат алу өчен безнең JavaScript документларын карагыз .

.modal(options)

Сезнең эчтәлекне модаль итеп активлаштыра. Өстәмә вариантларны кабул итә object.

$('#myModal').modal({
  keyboard: false
})

.modal('toggle')

Модальне кул белән алыштыра. Модаль күрсәтелгән яки яшерелгәнче (ягъни вакыйга булганчы) шалтыратучыга кире кайта.shown.bs.modalhidden.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һәм модаль читендә басу яки качу басмасы башкарылганда эшләнә. 
$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})