Trɔ yi nya veviwo gbɔ Trɔ yi docs ƒe mɔfiamewo dzi
Check
in English

Modal ƒe nɔnɔme

Zã Bootstrap ƒe JavaScript modal plugin nàtsɔ atsɔ dzeɖonyawo akpe ɖe wò nyatakakadzraɖoƒea ŋu hena kekeli ƒe aɖakawo, zãla ƒe nyatakakawo, alo nyatakaka siwo nètrɔ asi le keŋkeŋ.

Le axa sia dzi

Ale si wòwɔa dɔe

Hafi nàdze Bootstrap ƒe modal component gɔme la, kpɔ egbɔ be yexlẽ nusiwo gbɔna elabena míaƒe menu ƒe tiatiawɔblɔɖewo trɔ nyitsɔ laa.

  • Wotsɔ HTML, CSS, kple JavaScript tua mɔnuwo. Woɖo wo ɖe nu bubu ɖesiaɖe dzi le nuŋlɔɖia me eye woɖea agbalẽxatsaxatsa ɖa le la me <body>ale be modal emenyawo naʋuʋu boŋ.
  • Ne èzi modal “backdrop” dzi la, axe modal la le eɖokui si.
  • Bootstrap doa alɔ modal fesre ɖeka ko le ɣeyiɣi ɖeka me. Womedoa alɔ nested modals o elabena míexɔe se be wonye zãla ƒe nuteƒekpɔkpɔ gbegblẽwo.
  • Modals zãa position: fixed, si ate ŋu anye etɔxɛ vie ɣeaɖewoɣi le eƒe gɔmeɖeɖe ŋu. Ɣesiaɣi si wòanya wɔ la, da wò modal HTML ɖe teƒe si le dziƒo be nàƒo asa na nusiwo ate ŋu ado kplamatse nu bubuwo. Anɔ eme be àdo go kuxiwo ne èle atɔ wɔm .modalle nu bubu si woɖo ɖi me.
  • Le afisia hã la, le position: fixed, nuxlɔ̃ame aɖewo li le modals zazã le asitelefonwo dzi ŋu. Kpɔ míaƒe browser support docs hena numeɖeɖe bubuwo.
  • Le alesi HTML5 ɖea eƒe gɔmesese gɔmee ta la, HTML autofocusnɔnɔmea mekpɔa ŋusẽ aɖeke ɖe Bootstrap modals dzi o. Be nàkpɔ ŋusẽ ma ke la, zã JavaScript aɖewo siwo wowɔ ɖe ɖoɖo nu:
const myModal = document.getElementById('myModal')
const myInput = document.getElementById('myInput')

myModal.addEventListener('shown.bs.modal', () => {
  myInput.focus()
})
Akpa sia ƒe nɔnɔmetata ƒe ŋusẽkpɔɖeamedzi nɔ te ɖe prefers-reduced-motionnyadzɔdzɔgblɔmɔnuwo ƒe nyabiasea dzi. Kpɔ míaƒe mɔnukpɔkpɔwo ŋuti nuŋlɔɖiwo ƒe akpa si woɖe dzi kpɔtɔ .

Yi edzi nànɔ nu xlẽm hena wɔwɔfiawo kple zazã ŋuti mɔfiamewo.

Kpɔɖeŋuwo

Le ete la, static modal kpɔɖeŋu (si gɔmee nye eƒe positionkple displaywoɖe asi le wo ŋu). Nusiwo le emee nye modal ta, modal ŋutilã (si hiã na padding), kple modal afɔti (si nye tiatia). Míele biabiam be nàde modal headers kple dismiss actions ɣesiaɣi si wòanya wɔ, alo nàna dismiss action bubu si me kɔ.

Modal ƒe tanya

Modal ŋutilã nuŋɔŋlɔ yi afisia.

<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 ƒe wɔwɔfia

Trɔ asi le modal demo si le dɔ wɔm ŋu to asiƒoƒo ɖe dzesi si le ete la dzi. Aɖiɖi ɖe anyi eye wòaɖiɖi tso axaa tame.

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

Static megbenyawo

Ne woɖo backdrop ɖe static dzi la, modal la matu ne èzi edzi le egodo o. Zi dzesi si le ete dzi be nàtee kpɔ.

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

Nyatakaka didiwo ʋuʋu

Ne modals didi akpa na zãla ƒe nukpɔkpɔ alo mɔ̃a la, woʋua axaa ŋutɔ le wo ɖokui si. Te demo si le ete la kpɔ be nàkpɔ nusi míedi be yeagblɔ.

Àteŋu awɔ modal si woateŋu aʋuʋu hã si ana nàʋu modal ƒe ŋutilã to etsɔtsɔ kpe .modal-dialog-scrollableɖe .modal-dialog.

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

Le titina le tsitrenu

Tsɔe kpe ɖe eŋu .modal-dialog-centeredbe .modal-dialogwòaɖo modal la titina le tsitrenu.

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

Dɔwɔnu ƒe aɖaŋuɖoɖowo kple popovers

Woate ŋu atsɔ dɔwɔnu ƒe aɖaŋuɖoɖowo kple popovers ade modals me ne ehiã. Ne wotu modals la, woɖea dɔwɔnu ƒe aɖaŋuɖoɖo ɖesiaɖe kple popovers ɖesiaɖe si le eme hã ɖa le eɖokui si.

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

Grid la zazã

Zã Bootstrap grid system le modal me to nesting .container-fluidle .modal-body. Emegbe, zã grid system ƒe klass siwo sɔ la abe alesi nàwɔe le teƒe bubu ɖesiaɖe ene.

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

Modal ƒe emenyawo ƒe tɔtrɔ

Ðe abɔtawo ƒe ha aɖe si katã ʋãa modal ɖeka si me emenyawo to vovo vie la le asiwòa? Zã event.relatedTargetkple HTML data-bs-*nɔnɔmewo tsɔ trɔ asi le modal la me nyawo ŋu le abɔta si dzi wozi nu.

Le ete la, live demo si kplɔe ɖo kple kpɔɖeŋu HTML kple JavaScript. Ne èdi nyatakaka bubuwo la, xlẽ modal events docs hena numeɖeɖe tsitotsito le 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
})

Trɔ asi le modals dome

Trɔ asi le modal geɖewo dome kple aɖaŋudzedze aɖewo ɖoɖo ɖe data-bs-targetkple data-bs-togglenɔnɔmewo ŋu. Le kpɔɖeŋu me, àteŋu atrɔ password reset modal tso sign si woʋu xoxo le modal me. Taflatse de dzesii be womateŋu aʋu modal geɖewo le ɣeyiɣi ɖeka me o —ɖeko mɔnu sia trɔa asi le modal eve siwo to vovo dome.

Ʋu gbãtɔ modal
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>

Trɔ nɔnɔmetata si me woɖea nɔnɔmetatawo le

Trɔtrɔa $modal-fade-transformɖoa tɔtrɔ ƒe nɔnɔme si .modal-dialogdo ŋgɔ na modal fade-in animation, $modal-show-transformtɔtrɔa ɖoa tɔtrɔ ƒe .modal-dialogle modal fade-in animation ƒe nuwuwu.

Ne èdi le kpɔɖeŋu me, woawɔ nɔnɔmetata si woate ŋu adzi ɖe edzi la, àte ŋu aɖo $modal-fade-transform: scale(.8).

Ðe nɔnɔmetata siwo me woɖea nɔnɔmetatawo le la ɖa

Le modals siwo dzena ko tsɔ wu be woadzo le eme be woakpɔ la, ɖe .fadeklass la ɖa le wò modal markup la me.

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

Kɔkɔme siwo ŋu ŋusẽ le

Ne modal ƒe kɔkɔme trɔ esime wòle ʋuʋu la, ele be nàyɔ myModal.handleUpdate()be nàtrɔ asi le modal la ƒe nɔƒe ŋu nenye be agbalẽxatsaxatsa aɖe adze.

Mɔnukpɔkpɔwo ƒe Mɔnukpɔkpɔ

Kpɔ egbɔ be yetsɔ aria-labelledby="...", si nye modal ƒe tanya la, kpe ɖe .modal. Tsɔ kpe ɖe eŋu la, àte ŋu ana wò modal dialog ƒe numeɖeɖe kple aria-describedbyon .modal. De dzesii be mehiã be nàtsɔe akpe ɖe eŋu o role="dialog"elabena míetsɔe kpe ɖe eŋu xoxo to JavaScript dzi.

YouTube videowo dede eme

YouTube videowo dede modals me bia JavaScript bubu siwo mele Bootstrap me o be woadzudzɔ ƒoƒo le eɖokui si kple bubuwo. Kpɔ Stack Overflow ƒe nyatakaka sia si kpena ɖe ame ŋu hena nyatakaka bubuwo.

Agbɔsɔsɔme siwo woate ŋu atia

Modals ƒe lolome etɔ̃ le wo ɖokui si, siwo li to modifier classes dzi be woatsɔ ade .modal-dialog. Agbɔsɔsɔ siawo dzea egɔme le teƒe aɖewo be woaƒo asa na agbalẽxatsaxatsa siwo le tsia dzi le nukpɔkpɔ siwo le gbadzaa wu dzi.

Lolome Nusrɔ̃ƒe Modal max-kekeme ƒe didime
Sue .modal-sm 300px
Gᴐmedzeƒe Ɖeke o 500px
Lolo .modal-lg 800px
Wololo akpa .modal-xl 1140px

Míaƒe default modal si me modifier ƒe hatsotso mele o la nye “medium” size modal.

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

Modal si le screen bliboa dzi

Nu bubu si woatsɔ axe mɔ ɖe enue nye tiatia si woawɔ be woaɖe modal aɖe si atsyɔ zãla ƒe nukpɔkpɔƒe dzi, si li to tɔtrɔɖenu ƒe hatsotso siwo woda ɖe .modal-dialog.

Nusrɔ̃ƒe Alesi woate ŋu akpɔe
.modal-fullscreen Ɣe sia ɣi
.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 ƒe ƒuƒoƒo

Nusiwo trɔna

Wotsɔe kpe ɖe eŋu le v5.2.0 me

Abe Bootstrap ƒe CSS tɔtrɔwo ƒe mɔnu si le tɔtrɔm ƒe akpa aɖe ene la, modals zãa teƒea ƒe CSS tɔtrɔwo fifia le ɣeyiɣi ŋutɔŋutɔ ƒe tɔtrɔwɔwɔ si wodo ɖe ŋgɔ dzi .modalkple .modal-backdrophena ɣeyiɣi ŋutɔŋutɔ ƒe tɔtrɔwɔwɔ si wodo ɖe ŋgɔ. Woɖo asixɔxɔwo na CSS ƒe tɔtrɔwo to Sass dzi, eyata Sass ƒe tɔtrɔwɔwɔ gakpɔtɔ doa alɔ, hã.

  --#{$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 ƒe tɔtrɔwo

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

Xatsa

Wowɔa fullscreen modals siwo ɖoa nya ŋu to $breakpointsanyigbatata kple loop le 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;
      }
    }
  }
}

Zãzã

Modal plugin la trɔa wò nyatakaka ɣaɣlawo ne wobiae, to nyatakaka ƒe nɔnɔmewo alo JavaScript dzi. Eɖea asi le ʋuʋu ƒe nuwɔna si woɖo ɖi hã ŋu eye wòwɔa a .modal-backdropbe wòana teƒe si woate ŋu akli nu hena asiɖeɖe le modals siwo woɖe fia ŋu ne wole ʋuʋum le modal la godo.

To nyatakaka ƒe nɔnɔmewo dzi

Trɔ asi le eŋu

Wɔ modal aɖe ŋudɔ JavaScript maŋlɔ o. Ðoe data-bs-toggle="modal"ɖe dziɖunu ƒe akpa aɖe dzi, abe abɔta ene, kpakple data-bs-target="#foo"alo href="#foo"be nàɖo taɖodzinu na modal aɖe koŋ be wòatrɔ.

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

Ɖe asi le eŋu

Woateŋu awɔ dɔmeɖeɖe kple datanɔnɔme si le abɔta aɖe dzi le modal la me abe alesi woɖee fia le ete ene:

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

alo le abɔta aɖe si le modal la godo dzi to data-bs-targetalesi woɖee fia le ete la zazã me:

<button type="button" class="btn-close" data-bs-dismiss="modal" data-bs-target="#my-modal" aria-label="Close"></button>
Togbɔ be wodo alɔ mɔ eveawo siaa be woaɖe asi le modal ŋu ​​hã la, nenɔ susu me na wò be ɖeɖe ɖa tso modal godo mesɔ kple ARIA Authoring Practices Guide dialog (modal) pattern o . Wɔ esia le wò ŋutɔ wò afɔku me.

To JavaScript dzi

Wɔ modal kple JavaScript ƒe fli ɖeka:

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

Tiatiawɔblɔɖewo

Esi woateŋu atsɔ tiatiawɔnuwo ato nyatakaka nɔnɔmewo alo JavaScript dzi ta la, àteŋu atsɔ tiatia ŋkɔ akpe ɖe data-bs-, abe alesi wòle le data-bs-animation="{value}". Kpɔ egbɔ be yetrɔ tiatia ŋkɔa ƒe case type tso “ camelCase ” yi “ kebab-case ” ne èle tiatiaawo tom to data attributes dzi. Le kpɔɖeŋu me, zãe data-bs-custom-class="beautifier"ɖe data-bs-customClass="beautifier".

Tso Bootstrap 5.2.0 dzi la, akpaawo katã doa alɔ dodokpɔ ƒe nyatakaka si wodzra ɖo ƒe nɔnɔme data-bs-configsi ateŋu axɔ akpa ƒe ɖoɖo bɔbɔe abe JSON ka ene. Ne element aɖe si data-bs-config='{"delay":0, "title":123}'kple data-bs-title="456"nɔnɔmewo le la, asixɔxɔ mamlɛtɔ titleanye 456eye nyatakaka nɔnɔme vovovoawo axɔ asixɔxɔ siwo wona le data-bs-config. Tsɔ kpe ɖe eŋu la, nyatakaka ƒe nɔnɔme siwo li fifia te ŋu tsɔa JSON ƒe asixɔxɔwo abe data-bs-delay='{"show":0,"hide":150}'.

Ŋkɔ Ƒomevi Gᴐmedzeƒe Nuɖᴐɖᴐ
backdrop boolean, .'static' true Modal-backdrop ƒe akpa aɖe hã le eme. Alo, gblɔ staticna megbenya si metua modal la ne wozi edzi o.
focus boolean ƒe ƒuƒoƒo true Etsɔa susu ɖoa modal la ŋu ne wodze egɔme.
keyboard boolean ƒe ƒuƒoƒo true Doa modal la ne wozi escape key dzi.

Mɔnuwo

Mɔnu siwo mewɔ ɖeka kple ɣeyiɣi aɖeke o kple tɔtrɔwo

API mɔnuwo katã nye asynchronous eye wodzea tɔtrɔ gɔme . Wotrɔna yia ame si le ka ƒom na la gbɔ ne wonya dze tɔtrɔa gɔme ko gake hafi wòwu enu . Tsɔ kpe ɖe eŋu la, woaŋe aɖaba aƒu mɔnu ƒe yɔyɔ aɖe dzi le akpa si le tɔtrɔm dzi .

Kpɔ míaƒe JavaScript nuŋlɔɖiwo hena nyatakaka bubuwo .

Tiatiawɔblɔɖewo toto

Ewɔa wò nyatakakawo ŋudɔ abe modal ene. Lɔ̃ ɖe tiatia siwo woate ŋu awɔ le wo ɖokui si dzi object.

const myModal = new bootstrap.Modal('#myModal', {
  keyboard: false
})
Nuwɔmɔnu Nuɖᴐɖᴐ
dispose Egblẽa nu le element aɖe ƒe modal ŋu. (Eɖea nyatakaka siwo wodzra ɖo ɖe DOM ƒe akpaa dzi ɖa)
getInstance Static mɔnu si ɖea mɔ na wò be nàxɔ modal instance si do ƒome kple DOM element aɖe.
getOrCreateInstance Static mɔnu si ɖea mɔ na wò be nàxɔ modal instance si do ƒome kple DOM element, alo awɔ yeye nenye be womedze egɔme o.
handleUpdate Trɔ asi le modal ƒe nɔƒe ŋu kple asi ne modal ƒe kɔkɔme trɔ esime wòle ʋuʋu (si fia nenye be agbalẽxatsaxatsa aɖe dze).
hide Asi ɣlaa modal aɖe. Trɔ yi yɔla gbɔ hafi woɣla modal la ŋutɔŋutɔ (si nye hafi hidden.bs.modalnudzɔdzɔa nadzɔ).
show Eʋua modal aɖe kple asi. Trɔ yi yɔla gbɔ hafi woɖe modal la fia ŋutɔŋutɔ (si nye hafi shown.bs.modalnudzɔdzɔa nadzɔ). Azɔ hã, àteŋu atsɔ DOM ƒe akpa aɖe abe nyaʋiʋli si woateŋu axɔ le modal nudzɔdzɔwo me (abe relatedTargetnunɔamesi ene). (si nye const modalToggle = document.getElementById('toggleMyModal'); myModal.show(modalToggle).
toggle Asitɔtrɔ le modal aɖe ŋu. Trɔ yi yɔla gbɔ hafi woɖe modal la fia ŋutɔŋutɔ alo ɣlae (si nye hafi shown.bs.modalalo hidden.bs.modalnudzɔdzɔa nadzɔ).

Nudzɔdzɔwo

Bootstrap ƒe modal klass ɖea nudzɔdzɔ ʋee aɖewo ɖe go na hooking ɖe modal dɔwɔwɔ me. Woda tu modal nudzɔdzɔwo katã ɖe modal la ŋutɔ dzi (si nye le <div class="modal">).

Nudzᴐdzᴐ Nuɖᴐɖᴐ
hide.bs.modal Woɖea nudzɔdzɔ sia ɖa enumake ne woyɔ hideinstance mɔnu la.
hidden.bs.modal Woɖea nudzɔdzɔ sia ne wowu modal la ɣla ɖe zãla la nu (alala be CSS ƒe tɔtrɔwo nawu enu).
hidePrevented.bs.modal Wodoa nudzɔdzɔ sia ne woɖe modal la fia, eƒe megbenyawo nye staticeye wowɔ ʋuʋu le modal la godo. Woɖea nudzɔdzɔa hã ne wozi sisi ƒe safuia dzi eye woɖo keyboardtiatia la ɖe false.
show.bs.modal Nudzɔdzɔ sia doa dzo enumake ne woyɔ showkpɔɖeŋu mɔnu la. Ne ʋuʋu gbɔe wòtso la, nusi wozi la li abe relatedTargetnudzɔdzɔa ƒe nɔnɔme ene.
shown.bs.modal Woɖea nudzɔdzɔ sia ɖa ne wowɔ modal la be wòadze na zãla (alala be CSS ƒe tɔtrɔwo nawu enu). Ne ʋuʋu gbɔe wòtso la, nusi wozi la li abe relatedTargetnudzɔdzɔa ƒe nɔnɔme ene. 
const myModalEl = document.getElementById('myModal')
myModalEl.addEventListener('hidden.bs.modal', event => {
  // do something...
})