Tɛmɛn ka taa kunnafoni kunbabaw la Tɛmɛn ka taa docs navigation kan
Check
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 ma minnu bɛ se ka don a la. 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ɔko ɲɛ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:
const myModal = document.getElementById('myModal')
const myInput = document.getElementById('myInput')

myModal.addEventListener('shown.bs.modal', () => {
  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.

Titre modal

Modal farikolo sɛbɛnni bɛ Taa yan.

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

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>

Modal kɔnɔkow caman ɲɔgɔnna

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.

html ye 
<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
})

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

Modal Écran Complet

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

Yɛlɛma-yɛlɛmaw

A farala a kan v5.2.0 kɔnɔ

Bootstrap ka CSS fɛn caman sɛgɛsɛgɛli fɛɛrɛ min bɛ ka wuli ka bɔ a nɔ na, ​​o hukumu kɔnɔ, sisan, modɛliw bɛ baara kɛ ni sigida CSS fɛn caman sɛgɛsɛgɛli ye waati yɛrɛyɛrɛ ladamuni kan .modalani ka ɲɛtaa kɛ. .modal-backdropNafa minnu bɛ CSS fɛn caman sɛgɛsɛgɛli la, olu bɛ sigi Sass fɛ, o la Sass ka ladamuni bɛ dɛmɛ hali bi, o fana.

  --#{$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 bεε bε bεn

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

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,
      .modal-footer {
        @include border-radius(0);
      }

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

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.

Donanw ka fɛnɲɛnɛmaw fɛ

Toggle (Tɔgɔtɔgɔnin).

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 modɛli dɔ bɔli sira fila bɛɛ bɛ dɛmɛ, aw k’a to aw hakili la ko ka bɔ modali kɔkan, o tɛ bɛn ARIA sɛbɛnnikɛlaw ka baarakɛcogo gafe dialog (modal) cogoya ma . Aw bɛ o kɛ aw yɛrɛ ka farati la.

JavaScript fɛ

Modal dɔ Dabɔ ni JavaScript zana kelen ye:

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

Sugandili minnu bɛ kɛ

I n’a fɔ sugandiliw bɛ se ka tɛmɛ data attributes walima JavaScript fɛ, i bɛ se ka sugandi tɔgɔ dɔ fara data-bs-, i n’a fɔ a bɛ cogo min na data-bs-animation="{value}". Aw ye aw jija ka sugandili tɔgɔ ka case suguya Changer ka bɔ “ camelCase ” la ka kɛ “ kebab-case ” ye ni aw bɛ sugandiliw tɛmɛ data attributes fɛ. Misali la, baara kɛ data-bs-custom-class="beautifier"ni data-bs-customClass="beautifier".

Kabini Bootstrap 5.2.0, yɔrɔw bɛɛ bɛ dɛmɛ don kunnafoni- falen-falen-yɔrɔ-ko -kɛcogodata-bs-config dɔ la min bɛ se ka yɔrɔw labɛncogo nɔgɔmanw bila i n’a fɔ JSON sɛrɛ. Ni fɛn dɔ bɛ data-bs-config='{"delay":0, "title":123}'ni ni data-bs-title="456"fɛnw ye, nafa laban titlebɛna kɛ 456ani kunnafoni danfaralenw bɛna nafaw wuli minnu dira data-bs-config. O tɛmɛnen 'kɔ, kunnafoni-falen-falen-minɛn minnu bɛ yen olu bɛ Se ka JSON nafaw Ladon i n'a fɔ data-bs-delay='{"show":0,"hide":150}'.

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

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ɛsira suganditaw

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.

const myModal = new bootstrap.Modal('#myModal', {
  keyboard: false
})
Kɛcogo Cogojirali
dispose A bɛ element dɔ ka modal tiɲɛ. (A bɛ kunnafoni maralenw bɔ DOM element kan)
getInstance Static method min b’a to i bɛ se ka modal instance sɔrɔ min bɛ tali kɛ DOM element dɔ la.
getOrCreateInstance 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ɛ.
handleUpdate Modali jɔyɔrɔ ladilan ni bolo ye ni modali dɔ janya bɛ Changé ka a to da wulilen (o kɔrɔ ye ko ni sɛrɛkili dɔ bɔra).
hide 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 sani ko hidden.bs.modalin ka Kɛ).
show 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ɛ). 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). (o kɔrɔ ye ko const modalToggle = document.getElementById('toggleMyModal'); myModal.show(modalToggle).
toggle 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ɛ).

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 modal yɛrɛ la (o kɔrɔ ye ko <div class="modal">).

Lajɛrɛ Cogojirali
hide.bs.modal O ko in bɛ Fɔ o yɔrɔnin bɛɛ ni hidemisali 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 staticani clic dɔ bɛ Kɛ modal kɔkan. Ko in fana bɛ ci ni boli butɔni digilen don ani keyboardsugandili kɛra false.
show.bs.modal O ko in bɛ tasuma Bɔ o yɔrɔnin bɛɛ ni showmisali fɛɛrɛ Weelela. Ni a sababu Bɔra klikɛli la, fɛn min digilen dòn, o bɛ Sɔrɔ i n’a fɔ relatedTargetko 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ɔ relatedTargetko kɛlen in nafa. 
const myModalEl = document.getElementById('myModal')
myModalEl.addEventListener('hidden.bs.modal', event => {
  // do something...
})