Tsallake zuwa babban abun ciki Tsallake zuwa kewayawa na takardu
Check
in English

Modal

Yi amfani da Bootstrap's JavaScript modal plugin don ƙara maganganu zuwa rukunin yanar gizonku don akwatunan haske, sanarwar mai amfani, ko abun ciki na al'ada gabaɗaya.

A wannan shafi

Yadda yake aiki

Kafin farawa da kayan aikin Bootstrap, tabbatar da karanta masu zuwa kamar yadda zaɓuɓɓukan menu ɗinmu sun canza kwanan nan.

  • An gina su tare da HTML, CSS, da JavaScript. An sanya su akan duk wani abu da ke cikin takaddar kuma cire gungurawa daga <body>abin da ke cikin tsari a maimakon haka.
  • Danna kan modal "backdrop" zai rufe tsarin ta atomatik.
  • Bootstrap yana goyan bayan taga modal guda ɗaya kawai. Ba a samun tallafi ga ƙayyadaddun ƙayyadaddun ƙayyadaddun ƙayyadaddun tsarin kamar yadda muka yi imani da su rashin ƙwarewar mai amfani ne.
  • Modal amfani position: fixed, wanda wani lokaci na iya zama na musamman game da ma'anarsa. A duk lokacin da zai yiwu, sanya HTML ɗin ku a cikin babban matsayi don guje wa yuwuwar tsangwama daga wasu abubuwa. Wataƙila za ku gamu da matsala yayin da kuke yin gida a .modalcikin wani tsayayyen kashi.
  • Har yanzu, saboda position: fixed, akwai wasu fa'idodi tare da amfani da modal akan na'urorin hannu. Duba takaddun tallafin burauzan mu don cikakkun bayanai.
  • Saboda yadda HTML5 ke bayyana ma'anar tarukan sa, sifa ta autofocusHTML ba ta da wani tasiri a cikin tsarin Bootstrap. Don cimma sakamako iri ɗaya, yi amfani da wasu JavaScript na al'ada:
const myModal = document.getElementById('myModal')
const myInput = document.getElementById('myInput')

myModal.addEventListener('shown.bs.modal', () => {
  myInput.focus()
})
Tasirin raye-rayen wannan bangaren ya dogara ne da prefers-reduced-motiontambayar kafofin watsa labarai. Dubi raguwar sashin motsi na takaddun damar mu .

Ci gaba da karantawa don demos da jagororin amfani.

Misalai

A ƙasa akwai misali a tsayeposition (yana nufin sa kuma displayan shafe shi). An haɗa su da taken modal, jikin modal (da ake buƙata don padding), da ƙafar ƙafa (na zaɓi). Muna tambayarka cewa ka haɗa da manyan kanun labarai tare da korar ayyuka a duk lokacin da zai yiwu, ko samar da wani matakin korar bayyane.

Modal take

Modal rubutun jikin yana zuwa nan.

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

Live demo

Juya tsarin demo na aiki ta danna maɓallin da ke ƙasa. Zai zame ƙasa ya dushe daga saman shafin.

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

A tsaye

Lokacin da aka saita bayanan baya zuwa tsaye, tsarin ba zai rufe ba lokacin danna wajensa. Danna maɓallin da ke ƙasa don gwada shi.

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

Gungura dogon abun ciki

Lokacin da tsarin ya yi tsayi da yawa don kallon mai amfani ko na'urar, suna gungurawa ba tare da shafin kanta ba. Gwada demo na ƙasa don ganin abin da muke nufi.

Hakanan zaka iya ƙirƙirar tsarin gungurawa wanda ke ba da damar gungura jikin modal ta ƙara .modal-dialog-scrollablezuwa .modal-dialog.

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

A tsaye a tsakiya

Ƙara .modal-dialog-centeredzuwa .modal-dialoga tsaye a tsakiyar tsarin.

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

Tooltips da popovers

Za a iya sanya tukwici da ƙwaƙƙwaran kayan aiki a cikin tsari kamar yadda ake buƙata. Lokacin da aka rufe modal, duk wani nasihu na kayan aiki da popovers a ciki suma ana korarsu ta atomatik.

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

Amfani da grid

Yi amfani da tsarin grid na Bootstrap a cikin modal ta hanyar gida .container-fluida cikin .modal-body. Bayan haka, yi amfani da azuzuwan tsarin grid na yau da kullun kamar yadda kuke yi a ko'ina.

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

Maɓallin abun ciki na modal

Kuna da gungun maɓallai waɗanda duk ke haifar da modal iri ɗaya tare da abun ciki daban-daban? Yi amfani event.relatedTargetda halayen HTMLdata-bs-* don bambanta abubuwan da ke cikin tsarin ya danganta da wane maballin da aka danna.

A ƙasa akwai nunin raye-raye mai biye da misalin HTML da JavaScript. Don ƙarin bayani, karanta takaddun abubuwan abubuwan da suka faru don cikakkun bayanai akan 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
})

Juyawa tsakanin modal

Canja tsakanin ma'auni da yawa tare da wasu wayo na jeri data-bs-targetda data-bs-togglehalaye. Misali, zaku iya kunna tsarin sake saitin kalmar sirri daga cikin tsarin shigar da aka riga aka bude. Lura da yawa moals ba zai iya buɗewa a lokaci guda -yanzu tubgles tsakanin daban-daban daban daban modals.

Bude modal na farko
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>

Canza rayarwa

Mai $modal-fade-transformcanzawa yana ƙayyadad da yanayin canji na .modal-dialogkafin modal fade-in animation, $modal-show-transformmadaidaicin yana ƙayyade sauyin .modal-dialoga ƙarshen modal fade-in animation.

Idan kana son misali motsin zuƙowa, za ka iya saita $modal-fade-transform: scale(.8).

Cire rayarwa

Don ƙirar ƙirar da kawai ke bayyana maimakon faɗuwa don dubawa, cire .fadeajin daga alamar ƙirar ku.

<div class="modal" tabindex="-1" aria-labelledby="..." aria-hidden="true">
  ...
</div>

Matsakaicin tsayi

Idan tsayin modal ya canza yayin buɗewa, ya kamata ka kira myModal.handleUpdate()don daidaita matsayin modal idan gungura ya bayyana.

Dama

Tabbatar ƙara aria-labelledby="...", yin magana da taken modal, zuwa .modal. Bugu da ƙari, kuna iya ba da bayanin yanayin maganganun ku tare da aria-describedbykan .modal. Lura cewa ba kwa buƙatar ƙarawa role="dialog"tunda mun riga mun ƙara ta JavaScript.

Shigar da bidiyon YouTube

Shigar da bidiyon YouTube a cikin ƙirar yana buƙatar ƙarin JavaScript ba a cikin Bootstrap don dakatar da sake kunnawa ta atomatik da ƙari ba. Dubi wannan taimako mai taimako Stack Overflow post don ƙarin bayani.

Girman zaɓi

Modals suna da girma dabam na zaɓi uku, ana samun su ta azuzuwan gyara don sanya su akan .modal-dialog. Waɗannan masu girma dabam suna shiga a wasu wuraren karya don guje wa maƙallan gungurawa a kwance akan kunkuntar wuraren kallo.

Girman Class Modal max-nisa
Karami .modal-sm 300px
Default Babu 500px
Babba .modal-lg 800px
Babban babba .modal-xl 1140px

Tsarin mu na asali ba tare da ajin gyara ba ya ƙunshi tsarin girman “matsakaici”.

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

Modal mai cikakken allo

Wani ƙetare shi ne zaɓi don fito da tsari wanda ke rufe tashar kallon mai amfani, samuwa ta hanyar azuzuwan gyara waɗanda aka sanya akan .modal-dialog.

Class samuwa
.modal-fullscreen Koyaushe
.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

Masu canji

An ƙara a cikin v5.2.0

A matsayin wani ɓangare na tsarin canza canjin CSS na Bootstrap, modals yanzu suna amfani da masu canjin CSS na gida akan .modalkuma .modal-backdropdon haɓaka gyare-gyare na ainihin lokaci. An saita dabi'u don masu canjin CSS ta hanyar Sass, don haka har yanzu ana tallafawa keɓancewar Sass, ma.

  --#{$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 masu canji

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

Madauki

Ana samar da tsarin cikakken allo mai amsa ta $breakpointstaswira da madauki a ciki 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;
      }
    }
  }
}

Amfani

Modal plugin yana jujjuya abubuwan da ke ɓoye akan buƙatu, ta hanyar sifofin bayanai ko JavaScript. Hakanan yana ƙetare dabi'un gungurawa na asali kuma yana haifar da .modal-backdropdon samar da wurin dannawa don korar samfuran da aka nuna lokacin dannawa wajen modal.

Ta hanyar bayanan halayen

Juyawa

Kunna modal ba tare da rubuta JavaScript ba. Saita data-bs-toggle="modal"a kan abin sarrafawa, kamar maɓalli, tare da data-bs-target="#foo"ko href="#foo"don ƙaddamar da takamaiman tsari don juyawa.

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

Korar

Ana iya samun korarwa tare da datasifa akan maɓalli a cikin tsari kamar yadda aka nuna a ƙasa:

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

ko a kan maɓalli a waje da modal ta amfani da data-bs-targetkamar yadda aka nuna a ƙasa:

<button type="button" class="btn-close" data-bs-dismiss="modal" data-bs-target="#my-modal" aria-label="Close"></button>
Duk da yake ana goyan bayan hanyoyin biyu don korar modal, ka tuna cewa korar daga waje modal bai dace da tsarin Jagoran Ayyukan Mawallafi na ARIA (modal) ba. Yi wannan a kan hadarin ku.

Ta hanyar JavaScript

Ƙirƙiri modal tare da layi ɗaya na JavaScript:

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

Zabuka

Kamar yadda za a iya wuce zaɓuɓɓuka ta hanyar sifofin bayanai ko JavaScript, zaku iya ƙara sunan zaɓi zuwa data-bs-, kamar a cikin data-bs-animation="{value}". Tabbatar canza nau'in shari'ar sunan zaɓi daga " CamelCase " zuwa " kebab-case " lokacin ƙaddamar da zaɓuɓɓuka ta hanyar halayen bayanai. Misali, amfani data-bs-custom-class="beautifier"maimakon data-bs-customClass="beautifier".

Kamar na Bootstrap 5.2.0, duk abubuwan da aka gyara suna goyan bayan sifa da aka tanada na gwajidata-bs-config wanda zai iya saita tsarin sassauƙan sassa azaman kirtani JSON. Lokacin da kashi yana data-bs-config='{"delay":0, "title":123}'da data-bs-title="456"sifofi, titleƙimar ƙarshe za ta kasance 456kuma keɓantattun halayen bayanan za su soke ƙimar da aka bayar akan data-bs-config. Bugu da ƙari, halayen bayanan da ke akwai suna iya ɗaukar ƙimar JSON kamar data-bs-delay='{"show":0,"hide":150}'.

Suna Nau'in Default Bayani
backdrop boolean,'static' true Ya ƙunshi nau'in modal-backdrop. A madadin, saka staticdon bayanan baya wanda baya rufe tsarin lokacin da aka danna.
focus boolean true Yana sanya mayar da hankali kan modal lokacin da aka fara.
keyboard boolean true Yana rufe tsarin lokacin da aka danna maɓallin guduwa.

Hanyoyin

Hanyoyi masu daidaitawa da canji

Duk hanyoyin API ba daidai ba ne kuma suna fara canji . Suna komawa ga mai kiran da zarar an fara canji amma kafin ya ƙare . Bugu da ƙari, za a yi watsi da kiran hanya akan ɓangaren canji .

Duba takaddun JavaScript ɗin mu don ƙarin bayani .

Zaɓuɓɓukan wucewa

Yana kunna abun cikin ku azaman tsari. Yana yarda da zaɓin zaɓi object.

const myModal = new bootstrap.Modal('#myModal', {
  keyboard: false
})
Hanya Bayani
dispose Yana lalata tsarin sinadari. (Yana cire bayanan da aka adana akan ɓangaren DOM)
getInstance Hanyar a tsaye wacce ke ba ku damar samun misalan modal mai alaƙa da ɓangaren DOM.
getOrCreateInstance Hanyar a tsaye wacce ke ba ka damar samun misalin tsarin da ke da alaƙa da abin DOM, ko ƙirƙirar sabo idan ba a fara shi ba.
handleUpdate Da hannu gyara yanayin modal idan tsayin tsarin yana canzawa yayin buɗewa (watau idan gungura ya bayyana).
hide Da hannu yana ɓoye modal. Komawa ga mai kira kafin a ɓoye tsarin (watau kafin hidden.bs.modalabin ya faru).
show Da hannu yana buɗe modal. Komawa ga mai kira kafin a nuna ainihin tsari (watau kafin shown.bs.modalabin ya faru). Har ila yau, za ku iya wuce wani abu na DOM a matsayin hujja wanda za a iya karɓa a cikin abubuwan da suka faru (a matsayin relatedTargetdukiya). (watau const modalToggle = document.getElementById('toggleMyModal'); myModal.show(modalToggle).
toggle Da hannu yana jujjuya modal. Komawa ga mai kira kafin a nuna tsarin a zahiri ko ɓoye (watau kafin abin shown.bs.modalko hidden.bs.modalabin ya faru).

Abubuwan da suka faru

Ajin modal na Bootstrap yana fallasa ƴan abubuwan da suka faru don haɗawa cikin ayyukan modal. Duk abubuwan da suka faru na modal ana harba su akan modal kanta (watau a <div class="modal">).

Lamarin Bayani
hide.bs.modal Ana korar wannan taron nan da nan lokacin da hideaka kira hanyar misali.
hidden.bs.modal Ana kora wannan taron lokacin da tsarin ya gama ɓoyewa daga mai amfani (zai jira canjin CSS ya kammala).
hidePrevented.bs.modal Ana korar wannan taron lokacin da aka nuna modal, bayanansa shine statickuma danna waje na modal an yi. Hakanan ana harba taron lokacin da aka danna maɓallin gudu kuma keyboardaka saita zaɓi zuwa false.
show.bs.modal Wannan taron yana gobara nan da nan lokacin da showaka kira hanyar misali. Idan dannawa ya haifar, ana samun ɓangaren da aka latsa azaman relatedTargetmallakin taron.
shown.bs.modal Ana korar wannan taron lokacin da aka bayyana yanayin ga mai amfani (zai jira canjin CSS ya kammala). Idan dannawa ya haifar, ana samun ɓangaren da aka latsa azaman relatedTargetmallakin taron. 
const myModalEl = document.getElementById('myModal')
myModalEl.addEventListener('hidden.bs.modal', event => {
  // do something...
})