in English

Модаль

Bootstrap'ның JavaScript модаль плагинын кулланыгыз, сайтыгызга диалоглар өстәү өчен, яктырткычлар, кулланучылар хәбәрләре яки тулысынча махсус эчтәлек.

Бу биттә

Ничек бу эшли

Bootstrap'ның модаль компоненты белән башлар алдыннан, түбәндәгеләрне укыгыз, чөнки безнең меню вариантлары күптән түгел үзгәрде.

Модальләр HTML, CSS һәм JavaScript белән төзелгән. Алар документтагы бүтәннәр өстендә урнашканнар һәм <body>модаль эчтәлек урынына әйләндерү өчен әйләндерүне алып куялар.
Модаль "фон" га басыгыз, модаль автоматик рәвештә ябылачак.
Bootstrap берьюлы бер модаль тәрәзәгә ярдәм итә. Ояланган модальләр ярдәм итми, чөнки без аларны начар кулланучылар тәҗрибәсе дип саныйбыз.
Модальләр куллану position: fixed, алар күрсәтү турында кайвакыт бераз аерылып торырга мөмкин. Мөмкин булганда, башка элементларның потенциаль комачаулавын булдырмас өчен, модаль HTML-ны югары дәрәҗәдәге позициягә урнаштырыгыз. .modalБашка тотрыклы элемент эчендә оя корганда сез, мөгаен, проблемаларга эләгерсез .
Тагын бер тапкыр, шуңа күрә position: fixed, мобиль җайланмаларда модаль куллану белән кайбер саклыклар бар. Детальләр өчен безнең браузер ярдәм документларын карагыз .
HTML5 аның семантикасын ничек билгеләгәнгә , autofocusHTML атрибутының Bootstrap модалларында бернинди тәэсире юк. Шул ук эффектка ирешү өчен, кайбер JavaScript кулланыгыз:

var myModal = document.getElementById('myModal')
var myInput = document.getElementById('myInput')

myModal.addEventListener('shown.bs.modal', function () {
  myInput.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="btn-close" data-bs-dismiss="modal" aria-label="Close"></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-bs-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-bs-toggle="modal" data-bs-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="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-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-bs-toggle="modal" data-bs-target="#staticBackdrop">
  Launch static backdrop modal
</button>

<!-- Modal -->
<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-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="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-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-bs-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 ms-auto">.col-md-4 .ms-auto</div>
    </div>
    <div class="row">
      <div class="col-md-3 ms-auto">.col-md-3 .ms-auto</div>
      <div class="col-md-2 ms-auto">.col-md-2 .ms-auto</div>
    </div>
    <div class="row">
      <div class="col-md-6 ms-auto">.col-md-6 .ms-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.relatedTargetHTML атрибутларын data-bs-*кулланыгыз .

Түбәндә HTML һәм JavaScript үрнәге күрсәтелгән тере демо. Күбрәк мәгълүмат алу өчен, модаль вакыйгалар документларын укыгызrelatedTarget .

<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" data-bs-whatever="@mdo">Open modal for @mdo</button>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" data-bs-whatever="@fat">Open modal for @fat</button>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" data-bs-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="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <form>
          <div class="mb-3">
            <label for="recipient-name" class="col-form-label">Recipient:</label>
            <input type="text" class="form-control" id="recipient-name">
          </div>
          <div class="mb-3">
            <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-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Send message</button>
      </div>
    </div>
  </div>
</div>

var exampleModal = document.getElementById('exampleModal')
exampleModal.addEventListener('show.bs.modal', function (event) {
  // Button that triggered the modal
  var button = event.relatedTarget
  // Extract info from data-bs-* attributes
  var recipient = button.getAttribute('data-bs-whatever')
  // If necessary, you could initiate an AJAX request here
  // and then do the updating in a callback.
  //
  // Update the modal's content.
  var modalTitle = exampleModal.querySelector('.modal-title')
  var modalBodyInput = exampleModal.querySelector('.modal-body input')

  modalTitle.textContent = 'New message to ' + recipient
  modalBodyInput.value = recipient
})

Модальләр арасына күчә

Берничә модальне data-bs-targetһәм data-bs-toggleатрибутларны акыллы урнаштыру белән алыштырыгыз. Мисал өчен, сез серсүзне яңадан торгызу модалын модальдә инде ачык билге эчендә алыштыра аласыз. Зинһар, берничә модаль берьюлы ачык була алмый - бу ысул ике аерым модаль арасында күчә.

Беренче модальне ач

<div class="modal fade" id="exampleModalToggle" aria-hidden="true" aria-labelledby="exampleModalToggleLabel" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalToggleLabel">Modal 1</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        Show a second modal and hide this one with the button below.
      </div>
      <div class="modal-footer">
        <button class="btn btn-primary" data-bs-target="#exampleModalToggle2" data-bs-toggle="modal" data-bs-dismiss="modal">Open second modal</button>
      </div>
    </div>
  </div>
</div>
<div class="modal fade" id="exampleModalToggle2" aria-hidden="true" aria-labelledby="exampleModalToggleLabel2" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalToggleLabel2">Modal 2</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        Hide this modal and show the first with the button below.
      </div>
      <div class="modal-footer">
        <button class="btn btn-primary" data-bs-target="#exampleModalToggle" data-bs-toggle="modal" data-bs-dismiss="modal">Back to first</button>
      </div>
    </div>
  </div>
</div>
<a class="btn btn-primary" data-bs-toggle="modal" href="#exampleModalToggle" role="button">Open first modal</a>

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

Theзгәргеч модаль сүнгән анимация алдыннан үзгәрү $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.handleUpdate(), әйләндерү тактасы барлыкка килгән очракта сез модальнең торышын көйләргә шалтыратырга тиеш.

Уңайлык

aria-labelledby="..."Модаль исемгә сылтама белән өстәргә онытмагыз .modal. Өстәвенә, сез модаль диалогның тасвирламасын бирә aria-describedbyаласыз .modal. Игътибар итегез, сез өстәргә кирәк түгел, role="dialog"чөнки без аны JavaScript аша өстибез.

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

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

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

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

Тагын бер өстәмә язу - кулланучының күренешен каплаучы модальне ачу варианты, a урнаштырылган модификатор класслары аша .modal-dialog.

Класс	Мөмкинлек
`.modal-fullscreen`	Waysәрвакыт
`.modal-fullscreen-sm-down`	Түбәндә`576px`
`.modal-fullscreen-md-down`	Түбәндә`768px`
`.modal-fullscreen-lg-down`	Түбәндә`992px`
`.modal-fullscreen-xl-down`	Түбәндә`1200px`
`.modal-fullscreen-xxl-down`	Түбәндә`1400px`

<!-- Full screen modal -->
<div class="modal-dialog modal-fullscreen-sm-down">
  ...
</div>

Сасс

Variзгәрешләр

$modal-inner-padding:               $spacer;

$modal-footer-margin-between:       .5rem;

$modal-dialog-margin:               .5rem;
$modal-dialog-margin-y-sm-up:       1.75rem;

$modal-title-line-height:           $line-height-base;

$modal-content-color:               null;
$modal-content-bg:                  $white;
$modal-content-border-color:        rgba($black, .2);
$modal-content-border-width:        $border-width;
$modal-content-border-radius:       $border-radius-lg;
$modal-content-inner-border-radius: subtract($modal-content-border-radius, $modal-content-border-width);
$modal-content-box-shadow-xs:       $box-shadow-sm;
$modal-content-box-shadow-sm-up:    $box-shadow;

$modal-backdrop-bg:                 $black;
$modal-backdrop-opacity:            .5;
$modal-header-border-color:         $border-color;
$modal-footer-border-color:         $modal-header-border-color;
$modal-header-border-width:         $modal-content-border-width;
$modal-footer-border-width:         $modal-header-border-width;
$modal-header-padding-y:            $modal-inner-padding;
$modal-header-padding-x:            $modal-inner-padding;
$modal-header-padding:              $modal-header-padding-y $modal-header-padding-x; // Keep this for backwards compatibility

$modal-sm:                          300px;
$modal-md:                          500px;
$modal-lg:                          800px;
$modal-xl:                          1140px;

$modal-fade-transform:              translate(0, -50px);
$modal-show-transform:              none;
$modal-transition:                  transform .3s ease-out;
$modal-scale-transform:             scale(1.02);

Loop

Fullаваплы тулы экран модальләре$breakpoints карта һәм цикл аша ясала scss/_modal.scss.

@each $breakpoint in map-keys($grid-breakpoints) {
  $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
  $postfix: if($infix != "", $infix + "-down", "");

  @include media-breakpoint-down($breakpoint) {
    .modal-fullscreen#{$postfix} {
      width: 100vw;
      max-width: none;
      height: 100%;
      margin: 0;

      .modal-content {
        height: 100%;
        border: 0;
        @include border-radius(0);
      }

      .modal-header {
        @include border-radius(0);
      }

      .modal-body {
        overflow-y: auto;
      }

      .modal-footer {
        @include border-radius(0);
      }
    }
  }
}

Куллану

Модаль плагин сезнең яшерен эчтәлекне сорау буенча, мәгълүмат атрибутлары яки JavaScript аша алыштыра. Бу шулай ук килешү буенча әйләндерү тәртибен .modal-backdropкире кага һәм модаль читенә чыккач күрсәтелгән модальләрне кире кагу өчен басу өлкәсен тәэмин итә.

Мәгълүмат атрибутлары аша

JavaScript язмыйча модальне активлаштырыгыз. data-bs-toggle="modal"Контроллер элементына, төймә кебек, data-bs-target="#foo"яисә href="#foo"күберәк модальне максат итеп куегыз .

<button type="button" data-bs-toggle="modal" data-bs-target="#myModal">Launch modal</button>

JavaScript аша

JavaScriptның бер сызыгы белән модаль ясагыз:

var myModal = new bootstrap.Modal(document.getElementById('myModal'), options)

Вариантлар

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

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

Методлар

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

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

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

Вариантлар

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

var myModal = new bootstrap.Modal(document.getElementById('myModal'), {
  keyboard: false
})

күчү

Модальне кул белән алыштыра. Модаль күрсәтелгән яки яшерелгәнче (ягъни вакыйга булганчы) шалтыратучыга кире кайта.shown.bs.modalhidden.bs.modal

myModal.toggle()

шоу

Кул белән модаль ачыла. Модаль күрсәтелгәнче шалтыратучыга кире кайта (ягъни shown.bs.modalвакыйга булганчы).

myModal.show()

Шулай ук, сез DOM элементын аргумент буларак модаль вакыйгаларда кабул итә аласыз ( relatedTargetмилек буларак).

var modalToggle = document.getElementById('toggleMyModal') // relatedTarget
myModal.show(modalToggle)

яшер

Модальне кул белән яшерә. Модаль яшерелгәнче шалтыратучыга кире кайта (ягъни hidden.bs.modalвакыйга булганчы).

myModal.hide()

HandUpdate

Модальнең биеклеге ачык булганда үзгәрсә (ягъни әйләндерү тактасы барлыкка килгән очракта) модаль позициясен кул белән көйләгез.

myModal.handleUpdate()

утильләштерү

Элемент модалын җимерә. (DOM элементында сакланган мәгълүматны бетерә)

myModal.dispose()

getInstance

DOM элементы белән бәйләнгән модаль инстанцияне алырга мөмкинлек бирүче статик ысул

var myModalEl = document.getElementById('myModal')
var modal = bootstrap.Modal.getInstance(myModalEl) // Returns a Bootstrap modal instance

getOrCreateInstance

Статик ысул, ул DOM элементы белән бәйләнгән модаль инстанцияне алырга, яисә ул башланмаган очракта яңасын булдырырга мөмкинлек бирә.

var myModalEl = document.querySelector('#myModal')
var modal = bootstrap.Modal.getOrCreateInstance(myModalEl) // Returns a Bootstrap modal instance

Вакыйгалар

Bootstrap'ның модаль классы модаль функциягә керү өчен берничә вакыйганы фаш итә. Барлык модаль вакыйгалар да модальнең үзендә (ягъни <div class="modal">).

Вакыйга төре	Тасвирлау
`show.bs.modal`	`show`Бу вакыйга инстанция ысулы чакырылганда шунда ук янып тора . Әгәр басу аркасында килеп чыкса, басылган элемент `relatedTarget`вакыйганың милеге булып тора.
`shown.bs.modal`	Бу вакыйга модаль кулланучыга күренгәндә эшләнә (CSS күчү тәмамлануын көтәр). Әгәр басу аркасында килеп чыкса, басылган элемент `relatedTarget`вакыйганың милеге булып тора.
`hide.bs.modal`	`hide`Бу вакыйга инстанция ысулы чакырылганда шунда ук эштән чыгарыла .
`hidden.bs.modal`	Бу вакыйга модаль кулланучыдан яшерелгәннән соң эшләнә (CSS күчү тәмамлануын көтәр).
`hidePrevented.bs.modal`	Бу вакыйга модаль күрсәтелгәндә, аның фоны `static`һәм модаль читендә басу яки клавиатура параметры белән клавиатура варианты белән башкарыла яки `data-bs-keyboard`куела `false`.

var myModalEl = document.getElementById('myModal')
myModalEl.addEventListener('hidden.bs.modal', function (event) {
  // do something...
})

Модаль

Ничек бу эшли

Мисаллар

Модаль компонентлар

Модаль исем

Тере демо

Статик фон

Озын эчтәлекне әйләндерү

Вертикаль үзәк

Кораллар һәм поповерлар

Челтәр куллану

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

Модальләр арасына күчә

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

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

Динамик биеклекләр

Уңайлык

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

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

Тулы экран модалы

Сасс

Variзгәрешләр

Loop

Куллану

Мәгълүмат атрибутлары аша

JavaScript аша

Вариантлар

Методлар

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

Вариантлар

күчү

шоу

яшер

HandUpdate

утильләштерү

getInstance

getOrCreateInstance

Вакыйгалар