Гузаштан ба мундариҷаи асосӣ Ба новбари ҳуҷҷатҳо гузаред
Check
in English

Модал

Васлкунаки модалии JavaScript-и Bootstrap-ро барои илова кардани муколамаҳо ба сайти худ барои қуттиҳои равшанӣ, огоҳиҳои корбар ё мундариҷаи комилан фармоишӣ истифода баред.

Дар ин саҳифа

Он чӣ гуна кор мекунад

Пеш аз оғози кор бо ҷузъи модалии Bootstrap, боварӣ ҳосил кунед, ки зеринро хонед, зеро имконоти менюи мо ба наздикӣ тағир ёфтанд.

  • Модалҳо бо HTML, CSS ва JavaScript сохта шудаанд. Онҳо дар болои ҳама чизи дигаре дар ҳуҷҷат ҷойгир шудаанд ва ҳаракатро аз он хориҷ кунед, <body>то мундариҷаи модалӣ ба ҷои он ҳаракат кунад.
  • Ангуштзании модали "замина" ба таври худкор модалиро мепӯшонад.
  • Bootstrap дар як вақт танҳо як равзанаи модалиро дастгирӣ мекунад. Модалҳои дохилӣ дастгирӣ намешаванд, зеро мо боварӣ дорем, ки онҳо таҷрибаи ками корбаранд.
  • Модалҳо истифода мебаранд position: fixed, ки баъзан метавонад дар бораи намоиши он каме мушаххас бошад. То ҳадди имкон, HTML модалии худро дар сатҳи боло ҷойгир кунед, то аз дахолати эҳтимолӣ аз дигар унсурҳо канорагирӣ кунед. Эҳтимол шумо ҳангоми ҷойгир кардани як .modalэлементи собит дигар ба мушкилот дучор мешавед.
  • Бори дигар, аз сабаби position: fixed, баъзе огоҳиҳо дар бораи истифодаи модальҳо дар дастгоҳҳои мобилӣ вуҷуд доранд. Барои тафсилот ба ҳуҷҷатҳои дастгирии браузери мо нигаред.
  • Аз сабаби он ки чӣ тавр HTML5 семантикаи худро муайян мекунад, атрибути autofocusHTML дар modalҳои Bootstrap ҳеҷ гуна таъсире надорад. Барои ноил шудан ба ҳамон таъсир, якчанд JavaScript-и фармоиширо истифода баред:
const myModal = document.getElementById('myModal')
const myInput = document.getElementById('myInput')

myModal.addEventListener('shown.bs.modal', () => {
  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" data-bs-toggle="popover" 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="#" data-bs-toggle="tooltip" title="Tooltip">This link</a> and <a href="#" data-bs-toggle="tooltip" 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.relatedTargetва HTMLdata-bs-* -ро истифода баред, то мундариҷаи модалро вобаста ба он ки тугмача пахш карда шудааст, тағйир диҳед .

Дар зер намоиши зинда ва намунаи HTML ва JavaScript оварда шудааст. Барои маълумоти иловагӣ, ҳуҷҷатҳои рӯйдодҳои модалиро барои тафсилот дар бораи relatedTarget.

html 
<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>
const exampleModal = document.getElementById('exampleModal')
exampleModal.addEventListener('show.bs.modal', event => {
  // Button that triggered the modal
  const button = event.relatedTarget
  // Extract info from data-bs-* attributes
  const 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.
  const modalTitle = exampleModal.querySelector('.modal-title')
  const modalBodyInput = exampleModal.querySelector('.modal-body input')

  modalTitle.textContent = `New message to ${recipient}`
  modalBodyInput.value = recipient
})

Гузариш байни модальҳо

Гузариш байни модальҳои сершумор бо ҷойгиркунии оқилонаи data-bs-targetатрибутҳо data-bs-toggle. Масалан, шумо метавонед як модули барқароркунии паролро аз дохили аломати аллакай кушодашуда дар модали иваз кунед. Лутфан қайд кунед, ки якчанд модальҳо дар як вақт кушода намешаванд - ин усул танҳо байни ду модали алоҳида иваз мекунад.

Модали аввалро кушоед
html 
<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">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">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>

Аниматсияро тағир диҳед

Тағирёбанда $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-describedbyon .modal. Дар хотир доред, ки ба шумо лозим нест, ки илова кунед, role="dialog"зеро мо онро аллакай тавассути JavaScript илова кардаем.

Ҷойгиркунии видеоҳои YouTube

Ҷойгиркунии видеоҳои YouTube дар модальҳо JavaScript-и иловагиро талаб мекунад, ки на дар Bootstrap барои худкор қатъ кардани бозиҳо ва ғайра. Барои маълумоти бештар ба ин пости муфиди 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>

Модали пурра экран

Боз як бекоркунӣ ин имкони пайдо кардани модалиест, ки порти намоиши корбарро фаро мегирад ва тавассути синфҳои тағирдиҳандае, ки дар .modal-dialog.

Синф Мавҷудият
.modal-fullscreen Ҳамеша
.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>

CSS

Тағйирёбандаҳо

Дар v5.2.0 илова карда шудааст

Ҳамчун як қисми равиши тағирёбандаи CSS Bootstrap, модальҳо ҳоло тағирёбандаҳои маҳаллии CSS-ро дар .modalва .modal-backdropбарои мутобиқсозии мукаммали вақти воқеӣ истифода мебаранд. Арзишҳо барои тағирёбандаҳои CSS тавассути Sass муқаррар карда мешаванд, аз ин рӯ мутобиқсозии Sass ҳанӯз ҳам дастгирӣ карда мешавад.

  --#{$prefix}modal-zindex: #{$zindex-modal};
  --#{$prefix}modal-width: #{$modal-md};
  --#{$prefix}modal-padding: #{$modal-inner-padding};
  --#{$prefix}modal-margin: #{$modal-dialog-margin};
  --#{$prefix}modal-color: #{$modal-content-color};
  --#{$prefix}modal-bg: #{$modal-content-bg};
  --#{$prefix}modal-border-color: #{$modal-content-border-color};
  --#{$prefix}modal-border-width: #{$modal-content-border-width};
  --#{$prefix}modal-border-radius: #{$modal-content-border-radius};
  --#{$prefix}modal-box-shadow: #{$modal-content-box-shadow-xs};
  --#{$prefix}modal-inner-border-radius: #{$modal-content-inner-border-radius};
  --#{$prefix}modal-header-padding-x: #{$modal-header-padding-x};
  --#{$prefix}modal-header-padding-y: #{$modal-header-padding-y};
  --#{$prefix}modal-header-padding: #{$modal-header-padding}; // Todo in v6: Split this padding into x and y
  --#{$prefix}modal-header-border-color: #{$modal-header-border-color};
  --#{$prefix}modal-header-border-width: #{$modal-header-border-width};
  --#{$prefix}modal-title-line-height: #{$modal-title-line-height};
  --#{$prefix}modal-footer-gap: #{$modal-footer-margin-between};
  --#{$prefix}modal-footer-bg: #{$modal-footer-bg};
  --#{$prefix}modal-footer-border-color: #{$modal-footer-border-color};
  --#{$prefix}modal-footer-border-width: #{$modal-footer-border-width};
  
  --#{$prefix}backdrop-zindex: #{$zindex-modal-backdrop};
  --#{$prefix}backdrop-bg: #{$modal-backdrop-bg};
  --#{$prefix}backdrop-opacity: #{$modal-backdrop-opacity};

Тағйирёбандаҳои Sass

$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:        var(--#{$prefix}border-color-translucent);
$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:         var(--#{$prefix}border-color);
$modal-header-border-width:         $modal-content-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-footer-bg:                   null;
$modal-footer-border-color:         $modal-header-border-color;
$modal-footer-border-width:         $modal-header-border-width;

$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);

Доира

Модалҳои пурра экрани ҷавобгӯ тавассути $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,
      .modal-footer {
        @include border-radius(0);
      }

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

Истифода

Васлкунаки модалӣ мундариҷаи пинҳонии шуморо бо дархост тавассути атрибутҳои додаҳо ё 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>

Рад кардан

Аз кор озод кардан мумкин аст бо dataатрибут дар тугмаи дохили модаль , ки дар зер нишон дода шудааст, ба даст оварда шавад:

<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>

ё дар тугмаи берун аз модаль бо истифода аз он data-bs-targetтавре ки дар зер нишон дода шудааст:

<button type="button" class="btn-close" data-bs-dismiss="modal" data-bs-target="#my-modal" aria-label="Close"></button>
Гарчанде ки ҳарду роҳи рад кардани модаль дастгирӣ карда мешавад, дар хотир доред, ки аз берун хориҷ кардани модаль ба шакли муколамаи (модал) Дастури таҷрибаҳои муаллифии ARIA мувофиқат намекунад . Инро бо хатари худ иҷро кунед.

Тавассути JavaScript

Модалро бо як сатри JavaScript эҷод кунед:

const myModal = new bootstrap.Modal(document.getElementById('myModal'), options)
// or
const myModalAlternative = new bootstrap.Modal('#myModal', options)

Имконот

Азбаски вариантҳоро тавассути атрибутҳои додаҳо ё JavaScript интиқол додан мумкин аст, шумо метавонед номи опсияро ба data-bs-монанди дар data-bs-animation="{value}". Боварӣ ҳосил кунед, ки ҳангоми интиқоли параметрҳо тавассути атрибутҳои додаҳо навъи парвандаи номи опсияро аз “ camelCase ” ба “ kebab-case ” иваз кунед. Масалан, data-bs-custom-class="beautifier"ба ҷои data-bs-customClass="beautifier".

Аз Bootstrap 5.2.0, ҳама ҷузъҳо атрибутҳои таҷрибавии ҳифзшударо дастгирӣ мекунанд data-bs-config, ки метавонад конфигуратсияи ҷузъҳои оддиро ҳамчун сатри JSON ҷойгир кунад. Вақте ки элемент дорои data-bs-config='{"delay":0, "title":123}'ва data-bs-title="456"атрибутҳо мебошад, titleарзиши ниҳоӣ хоҳад буд 456ва атрибутҳои додаҳои алоҳида арзишҳои дар data-bs-config. Илова бар ин, атрибутҳои мавҷудаи маълумот қодиранд арзишҳои JSON ба монанди data-bs-delay='{"show":0,"hide":150}'.

Ном Навъи Пешфарз Тавсифи
backdrop булӣ,'static' true Унсури модаль-заминаро дар бар мегирад. Интихобан, staticбарои заминае муайян кунед, ки ҳангоми клик модалиро намепӯшад.
focus булӣ true Ҳангоми оғозёбӣ таваҷҷӯҳро ба модаль мегузорад.
keyboard булӣ true Вақте ки тугмаи escape пахш карда мешавад, модальро мепӯшонад.

Усулҳо

Усулҳо ва гузаришҳои асинхронӣ

Ҳама усулҳои API асинхронӣ мебошанд ва гузаришро оғоз мекунанд. Онҳо баробари оғоз шудани гузариш ба зангзананда бармегарданд, аммо пеш аз анҷоми он . Илова бар ин, даъвати методӣ ба ҷузъи гузариш нодида гирифта мешавад.

Барои маълумоти бештар ба ҳуҷҷатҳои JavaScript-и мо нигаред .

Вариантҳои гузариш

Мундариҷаи шуморо ҳамчун модаль фаъол мекунад. Вариантҳои ихтиёриро қабул мекунад object.

const myModal = new bootstrap.Modal('#myModal', {
  keyboard: false
})
Усул Тавсифи
dispose Модали элементро нест мекунад. (Маълумоти захирашударо дар элементи DOM нест мекунад)
getInstance Усули статикӣ , ки ба шумо имкон медиҳад, ки намунаи модалии бо унсури DOM алоқамандро ба даст оред.
getOrCreateInstance Усули статикӣ , ки ба шумо имкон медиҳад, ки намунаи модалии бо унсури DOM алоқамандро ба даст оред ё дар сурати ба кор андохта нашудани он нав эҷод кунед.
handleUpdate Мавқеи модальро ба таври дастӣ аз нав танзим кунед, агар баландии модаль ҳангоми кушода будани он тағир ёбад (яъне дар сурати пайдо шудани лавҳаи ҳаракат).
hide Модалро дастӣ пинҳон мекунад. Ба зангзананда пеш аз пинҳон шудани модаль (яъне пеш аз hidden.bs.modalрух додани ҳодиса) бармегардад.
show Модалро дастӣ мекушояд. Ба зангзананда пеш аз намоиши модаль (яъне пеш аз shown.bs.modalрух додани ҳодиса) бармегардад. Инчунин, шумо метавонед як унсури DOM-ро ҳамчун далел гузаронед, ки онро дар рӯйдодҳои модалӣ қабул кардан мумкин аст (ҳамчун relatedTargetмоликият). (яъне const modalToggle = document.getElementById('toggleMyModal'); myModal.show(modalToggle).
toggle Модалро дастӣ иваз мекунад. Ба зангзананда пеш аз он ки модаль воқеан нишон дода шавад ё пинҳон шавад (яъне пеш аз рух додани ҳодиса shown.bs.modalё ҳодиса) бармегардад.hidden.bs.modal

Ҳодисаҳо

Синфи модалии Bootstrap чанд ҳодисаро барои пайвастшавӣ ба функсияи модалӣ фош мекунад. Ҳама рӯйдодҳои модалӣ ба худи модал (яъне дар <div class="modal">) тирандозӣ карда мешаванд.

Ҳодиса Тавсифи
hide.bs.modal Ин ҳодиса фавран ҳангоми hideдаъват кардани усули инстансия оғоз мешавад.
hidden.bs.modal Ин ҳодиса пас аз анҷоми пинҳон кардани модаль аз корбар оғоз мешавад (то ба анҷом расидани гузаришҳои CSS интизор мешавад).
hidePrevented.bs.modal Ин ҳодиса ҳангоми нишон додани модаль, пасзаминаи он staticва пахши берун аз модаль иҷро мешавад. Ҳодиса инчунин ҳангоми пахш кардани тугмаи фирор ва keyboardинтихоб ба false.
show.bs.modal Ин ҳодиса фавран ҳангоми showдаъват кардани усули инстансия оғоз меёбад. Агар дар натиҷаи клик ба вуҷуд омада бошад, унсури кликшуда ҳамчун relatedTargetмоликияти ҳодиса дастрас аст.
shown.bs.modal Ин ҳодиса вақте оғоз мешавад, ки модаль барои корбар намоён карда шудааст (то ба анҷом расидани гузаришҳои CSS интизор мешавад). Агар дар натиҷаи клик ба вуҷуд омада бошад, унсури кликшуда ҳамчун relatedTargetмоликияти ҳодиса дастрас аст. 
const myModalEl = document.getElementById('myModal')
myModalEl.addEventListener('hidden.bs.modal', event => {
  // do something...
})