in English

Modal

Baara kɛ ni Bootstrap ka JavaScript modal plugin ye walasa ka kumasenw fara i ka yɔrɔ kan walasa ka yeelenbɔlanw sɔrɔ, ka baarakɛlaw ka kunnafoniw sɔrɔ, walima ka kunnafoniw sɔrɔ minnu bɛ kɛ ka kɛɲɛ ni u yɛrɛ sago ye pewu.

Nin ɲɛ in kan

A bɛ baara kɛ cogo min na

Sani aw ka Bootstrap ka modal component daminɛ, aw ye aw jija ka ninnu kalan bawo an ka menu suganditaw Changé kɔsa in na.

Modaliw bɛ jɔ ni HTML, CSS ani JavaScript ye. U bɛ jɔ sɛbɛn kɔnɔ fɛn tɔw bɛɛ kan ani ka sɛrɛkili Bɔ a <body>la walasa modal kɔnɔkow ka sɛrɛkiliw Kɛ o nɔ na.
Ni i ye modal “backdrop” digi, o bɛna modal datugu a yɛrɛma.
Bootstrap bɛ modal window kelen dɔrɔn de dɛmɛ a waati kelen na. Nested modals tɛ dɛmɛn bawo an dalen b’a la k’u ye baarakɛcogo juguw ye.
Modals use position: fixed, min bɛ Se ka Kɛ kɛrɛnkɛrɛnnenya la dɔɔnin a ka baarakɛcogo la tuma dɔw la. Ni aw bɛ se tuma o tuma, aw bɛ aw ka HTML modali bila sanfɛyɔrɔ la walasa ka aw yɛrɛ tanga fɛn wɛrɛw ka fɛn wɛrɛw ma minnu bɛ se ka kɛ. A ka c’a la, i bɛ boli ka gɛlɛyaw sɔrɔ ni i bɛ nesting a .modalkɔnɔ fɛn jɔlen wɛrɛ kɔnɔ.
Nin sen in fana na, k’a sababu kɛ position: fixed, lasɔmini dɔw bɛ yen ni baara kɛli ye ni modaliw ye telefɔni selilɛriw kan. Aw ye an ka navigatɛri dɛmɛ sɛbɛnw lajɛ walasa ka kunnafoni wɛrɛw sɔrɔ.
K’a sababu Kɛ HTML5 b’a kɔrɔfɔcogo ɲɛfɔ cogo min na, HTML autofocusfɛnɲɛnɛma tɛ nɔ Blà Bootstrap modaliw la. Walasa ka o nɔ kelen sɔrɔ, baara kɛ ni JavaScript dɔw ye minnu bɛ kɛ ka kɛɲɛ ni mɔgɔw sago ye:

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

myModal.addEventListener('shown.bs.modal', function () {
  myInput.focus()
})

Nin yɔrɔ in ka animation nɔ bɛ bɔ prefers-reduced-motionmedia ɲininkali de la. aw ye an ka sɔrɔli sɛbɛnw yɔrɔ lajɛ min bɛ lamaga dɔgɔyalen na .

Aw bɛ to ka kalan kɛ walasa ka demow ni baarakɛcogo ɲɛfɔlenw sɔrɔ.

Misaliw

Dugukolo kan, misali modal statikiposition (o kɔrɔ ye a ni displaya ye overridden) ye. O la, modal kunkolo, modali farikolo (a wajibiyalen don padding), ani modal footer (a bɛ se ka kɛ a yɛrɛ sago ye). An b’a ɲini aw fɛ aw ka modal headers don ni bɔli walew ye ni a bɛ se ka kɛ tuma o tuma, walima ka bɔli wale jɛlen wɛrɛ di.

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

Demo en direct

Toggle a working modal demo ni i ye butɔni digi min bɛ duguma. A bɛna sɛgɛn ka jigin ka tunun ka bɔ ɲɛ sanfɛ.

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

Backdrop statique ye

Ni kɔkanna bilalen don statiki la, modal tɛna da tugu ni i ye a kɔkanna digi. Butɔn digi min bɛ duguma walasa k’a lajɛ.

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

Kɔnɔkow janyalenw sɛgɛsɛgɛli

Ni modɛliw janyalen don kojugu baarakɛla ka filɛli-yɔrɔ walima minɛn na, u bɛ 'sèn Bɔ u yɛrɛ ma ɲɛ yɛrɛ la. Aw ye demo min bɛ duguma, o lajɛ walasa k’a dɔn an b’a fɛ ka min fɔ.

Aw bɛ se fana ka modal scrollable dɔ da min bɛ sira di scroll modal farikolo ma ni farali .modal-dialog-scrollableye .modal-dialog.

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

A bɛ cɛmancɛ jɔlen na

A fara a .modal-dialog-centeredkan ka .modal-dialogmodal cɛmancɛ la vertically.

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

Baarakɛminɛnw ni popovers

Baarakɛminɛnw ni popoverw bɛ se ka bila modaliw kɔnɔ i n’a fɔ a mago bɛ cogo min na. Ni modɛliw datugulen don, baarakɛminɛnw ni popover minnu bɛ kɔnɔ, olu fana bɛ bɔ u yɛrɛ la.

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

Baara kɛ ni grid ye

Baara kɛ ni Bootstrap grid system ye modal kɔnɔ ni nesting .container-fluidye .modal-body. O kɔfɛ, baara kɛ ni normal grid system classes ye i n’a fɔ aw bɛ baara kɛ cogo min na yɔrɔ wɛrɛw la.

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

Yala butɔni kulu dɔ bɛ aw bolo minnu bɛɛ bɛ modɛli kelen daminɛ ni kɔnɔkow tɛ kelen ye dɔɔnin wa? Baara kɛ event.relatedTargetni HTML data-bs-*fɛnw ye walasa ka modal kɔnɔkow caman ɲɔgɔn falen ka kɛɲɛ ni butɔni min digilen don.

Jigin na, ɲɛjirali ɲɛnama dɔ bɛ yen min bɛ tugu misali HTML ni JavaScript kɔ. Walasa ka kunnafoni wɛrɛw sɔrɔ, aw ye modal events docs kalan walasa ka kunnafoni wɛrɛw sɔrɔ 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
})

Toggle (Yɛlɛma) modɛliw ni ɲɔgɔn cɛ

Toggle between multiple modals ni dɔw clever placement of the data-bs-targetand data-bs-toggleattributes. Misali la, i bɛ se ka password reset modal dɔ wuli ka bɔ sign da wulilen kɔnɔ kaban modal kɔnɔ. Aw k’a kɔlɔsi ko modɛli caman tɛ se ka da wuli waati kelen na —o fɛɛrɛ bɛ wuli dɔrɔn modali fila danfaralenw cɛ.

Da wuli fɔlɔ modal

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

Animasiyɔn caman Changer

O $modal-fade-transformbεε bε bεnkansεbεn cogoya jira .modal-dialogka kɔn modal fade-in animation ɲɛ, $modal-show-transformbεnkansεbεn bε bεnkansεbεn min bε sεbεncogo jira .modal-dialogmodal fade-in animation laban na.

Ni aw b’a fɛ misali la zoom-in animation, aw bɛ se ka $modal-fade-transform: scale(.8).

Animatɛriw bɔ yen

Ni modaliw bɛ bɔ dɔrɔn sanni u ka fade in ka lajɛ, i ka .fadekalasi bɔ i ka modali taamasiyɛn na.

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

Dinamiki sanfɛyɔrɔw

Ni modɛli dɔ janya bɛ Changé k’a sɔrɔ a dabɔlen don, i ka kan ka weleli myModal.handleUpdate()kɛ walasa ka modal jɔyɔrɔ ladilan kokura ni scrollbar dɔ bɔra.

Seko ni dɔnko

Aw ye aw jija ka fara aria-labelledby="...", ka ɲɛsin modɛli tɔgɔ ma, ka fara .modal. Ka fara o kan, aw bɛ se ka ɲɛfɔli kɛ aw ka modal dialogue kan ni aria-describedbyon ye .modal. A kɔlɔsi ko i mago t’a la ka dɔ fara a kan role="dialog"bawo an b’a fara a kan kaban JavaScript fɛ.

YouTube wideyow doncogo

YouTube wideyow donli modaliw kɔnɔ, o bɛ JavaScript wɛrɛw de wajibiya minnu tɛ Bootstrap kɔnɔ walasa ka fɔli jɔ a yɛrɛma ani fɛn wɛrɛw. Aw ye nin dɛmɛnan Stack Overflow post lajɛ walasa ka kunnafoni wɛrɛw sɔrɔ.

Hakɛw minnu bɛ se ka kɛ i yɛrɛ sago ye

Modalw bɛ ni hakɛ saba ye minnu bɛ se ka sugandi, minnu bɛ sɔrɔ modifier classes fɛ ka bila a kan .modal-dialog. O hakɛw bɛ Dòn kariyɔrɔ dɔw la walasa ka i yɛrɛ tanga 'sènfɛ-sɛbɛnniw ma minnu bɛ 'yɔrɔ fitininw kan.

Kundama	Kilasi	Modal max-largeur ye
Fitinin	`.modal-sm`	`300px`
Fɔlɔ	Foɲisi	`500px`
Belebeleba	`.modal-lg`	`800px`
A ka bon kosɛbɛ	`.modal-xl`	`1140px`

An ka modɛli default sans modifier class bɛ Kɛ “medium” size modal ye.

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

O kɔ fɛ, o ye sugandili ye ka modal dɔ Bɔ min bɛ baarakɛla ka filɛli-yɔrɔ datugu, min bɛ Sɔrɔ modifier classes fɛ minnu bɛ Blà a kan .modal-dialog.

Kilasi	A bɛ sɔrɔ
`.modal-fullscreen`	Tuma bɛ
`.modal-fullscreen-sm-down`	Jukɔrɔ`576px`
`.modal-fullscreen-md-down`	Jukɔrɔ`768px`
`.modal-fullscreen-lg-down`	Jukɔrɔ`992px`
`.modal-fullscreen-xl-down`	Jukɔrɔ`1200px`
`.modal-fullscreen-xxl-down`	Jukɔrɔ`1400px`

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

Sass ye

Yɛlɛma-yɛlɛmaw

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

Bukulu

Responsive fullscreen modals bɛ sɔrɔ $breakpointskarti fɛ ani loop in 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);
      }
    }
  }
}

Baarakɛcogo

Modal plugin bɛ i ka kunnafoni dogolenw sɛgɛsɛgɛ ni ɲinini kɛra, data attributes walima JavaScript fɛ. A fana bɛ 'sèn Bɔ 'sènfɛ-sɛbɛnni kɛcogo kɔrɔ la ani ka a Lawuli .modal-backdropwalasa ka klikɛli yɔrɔ Di walasa ka modɛli jiralenw Labɔ n'i bɛ digi modali kɔkan.

Ka tɛmɛn donanw ka fɛnw kan

Toggle (Yɛlɛma).

Modal dɔ baara k’a sɔrɔ i ma JavaScript sɛbɛn. Set data-bs-toggle="modal"on controleur element, i n’a fɔ butɔni, ka fara a kan data-bs-target="#foo"walima href="#foo"ka target modal kɛrɛnkɛrɛnnen dɔ toggle.

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

Ka gɛn

Bɔli bɛ se ka sɔrɔ ni fɛn dataye min bɛ butɔni dɔ kan modal kɔnɔ i n’a fɔ a jiralen bɛ cogo min na jukɔrɔ:

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

walima butɔni dɔ kan modal kɔkan ni data-bs-targeti n’a fɔ a jiralen bɛ cogo min na jukɔrɔ:

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

Hali ni modal dɔ bɔli sira fila bɛɛ bɛ dɛmɛ, aw k’a to aw hakili la ko ka bɔ modal kɔkan, o tɛ bɛn WAI-ARIA modal dialog design pattern ma . Aw bɛ o kɛ aw yɛrɛ ka farati la.

JavaScript fɛ

Modal dɔ Dabɔ ni JavaScript zana kelen ye:

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

Sugandili minnu bɛ kɛ

Sugandili bɛ se ka tɛmɛ data attributes walima JavaScript fɛ. Donanw cogoyaw kama, aw bɛ sugandi tɔgɔ fara data-bs-, i n’a fɔ a bɛ cogo min na data-bs-backdrop="".

Tɔ̀gɔ	Ka sɛbɛen masin na	Fɔlɔ	Cogojirali
`backdrop`	boolean walima jiribolo`'static'`	`true`	Modal-backdrop element dɔ bɛ a kɔnɔ. O cogo kelen na, a jira `static`ka ɲɛsin kɔkannafɛn dɔ ma min tɛ modal da tugu click kan.
`keyboard`	boolean ye	`true`	A bɛ modal da tugu ni escape key digilen don
`focus`	boolean ye	`true`	A bɛ sinsin kɛ modal kan ni a daminɛna.

Fɛɛrɛw

Fɛɛrɛ minnu tɛ kelen ye ani fɛn caman tigɛli

API fɛɛrɛw bɛɛ ye asynchrone ye ani ka tɛmɛsira dɔ daminɛ . u bɛ segin welebaga ma ni wuli daminɛna dɔrɔn nka sanni a ka ban . Ka fara o kan, fɛɛrɛ weleli min bɛ kɛ tɛmɛsira yɔrɔ dɔ kan, o bɛna jate .

aw ye an ka JavaScript sɛbɛnw lajɛ walasa ka kunnafoni wɛrɛw sɔrɔ .

Tɛmɛni sugandiliw

A bɛ i ka kɔnɔkow baara i n’a fɔ modal. A bɛ sɔn sugandiliw ma minnu bɛ se ka kɛ object.

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

toggle (toggle) kɛ

A bɛ modal dɔ wuli ni bolo ye. A bɛ Segin welebaga ma sani modal ka jira tiɲɛ na walima ka dogo (o kɔrɔ ye ko sanni shown.bs.modalwalima hidden.bs.modalko kɛlen ka Kɛ).

myModal.toggle()

k'a jira

A bɛ modal dɔ da wuli ni bolo ye. A bɛ Segin welebaga ma sani modal ka jira tiɲɛ na (o kɔrɔ ye ko sanni ko shown.bs.modalin ka Kɛ).

myModal.show()

Ani fana, i bɛ Se ka DOM yɔrɔ dɔ Tɛmɛ i n’a fɔ dalilu min bɛ Se ka Sɔrɔ modɛli ko kɛlenw na (i n’a fɔ relatedTargetnafolo).

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

ka dogo

A bɛ modal dɔ dogo ni bolo ye. A bɛ Segin welebaga ma sani modɛli ka dogo tiɲɛ na (o kɔrɔ ye ko sanni ko hidden.bs.modalin ka Kɛ).

myModal.hide()

handleKunnafoni

Modali jɔyɔrɔ ladilan ni bolo ye ni modali dɔ janya bɛ Changé ka a da wuli (o kɔrɔ ye ko ni sɛrɛkili dɔ bɔra).

myModal.handleUpdate()

ka a fili

A bɛ element dɔ ka modal tiɲɛ. (A bɛ kunnafoni maralenw bɔ DOM element kan)

myModal.dispose()

getInstance ye

Static method min b’a to i bɛ se ka modal instance sɔrɔ min bɛ tali kɛ DOM element dɔ la

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

sɔrɔWala ka Instance Dabɔ

Fɛɛrɛ jɔlen min b’a To i bɛ se ka modal instance sɔrɔ min bɛ tali Kɛ DOM element dɔ la, walima ka kura Dabɔ n’a sɔrɔla a ma daminɛ

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

Ko minnu kɛra

Bootstrap ka modal class bɛ ko damadɔw jira kɛnɛ kan walasa ka hooking kɛ modal baarakɛcogo la. Modal ko kɛlenw bɛɛ bɛ tasuma don modali yɛrɛ la (o kɔrɔ ye ko <div class="modal">).

Ko kɛlen suguya	Cogojirali
`show.bs.modal`	O ko in bɛ tasuma Bɔ o yɔrɔnin bɛɛ ni `show`misali fɛɛrɛ Weelera. Ni a sababu Bɔra klikɛli la, fɛn min digilen dòn, o bɛ Sɔrɔ i n’a fɔ `relatedTarget`ko kɛlen in nafa.
`shown.bs.modal`	O ko in bɛ Fɔ ni modal Kɛra ka Ye baarakɛla fɛ (a bɛna CSS 'tɛmɛsiraw makɔnɔ ka Ban). Ni a sababu Bɔra klikɛli la, fɛn min digilen dòn, o bɛ Sɔrɔ i n’a fɔ `relatedTarget`ko kɛlen in nafa.
`hide.bs.modal`	O ko in bɛ Fɔ o yɔrɔnin bɛɛ ni `hide`misali fɛɛrɛ Weelera.
`hidden.bs.modal`	O ko in bɛ Fɔ ni modal ye dogolen Ban baarakɛla la (a bɛna CSS 'tɛmɛsiraw makɔnɔ u ka ban).
`hidePrevented.bs.modal`	O ko in bɛ Fɔ ni modal jirala, a kɔkanna ye `static`ani clic min bɛ modal kɔkan walima escape key press bɛ Kɛ ni klaviyeti sugandilen ye walima `data-bs-keyboard`k'a Blà `false`.

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