U gudub nuxurka muhiimka ah U gudub dukumentiyada navigation
Check
in English

Modal

Adeegso Bootstrap's JavaScript modal plugin si aad ugu darto wada sheekaysiga goobtaada sanduuqyada laydhka, ogeysiisyada isticmaalaha, ama gabi ahaanba nuxurka gaarka ah.

Boggan

Sida ay u shaqeyso

Kahor intaadan bilaabin qaybta moodeelka Bootstrap, hubi inaad akhrido kuwan soo socda maadaama xulashooyinka liiskayadu ay dhawaan isbeddeleen.

  • Moodooyinka waxaa lagu dhisay HTML, CSS, iyo JavaScript. Waxay dulsaaran yihiin wax kasta oo kale oo ku jira dukumeentiga oo ka saar rog- <body>rog si ay nuxurka modal u rogo.
  • Gujinta habka "backdrop" waxay si toos ah u xiri doontaa habka.
  • Bootstrap waxay taageertaa hal daaqad modal markiiba. Qaababka buulka ah lama taageero maadaama aan aaminsanahay inay yihiin khibrad isticmaale oo liidata.
  • Isticmaalka moodooyinka position: fixed, kuwaas oo mararka qaarkood noqon kara xoogaa gaar ah oo ku saabsan samayntiisa. Mar kasta oo ay suurtogal tahay, dhig habka HTML-kaaga meel heer sare ah si aad uga fogaato faragelinta suurtagalka ah ee ka iman karta walxaha kale. Waxay u badan tahay inaad la kulanto arrimo markaad buul .modalku dhex gelinayso shay kale oo go'an.
  • Mar labaad, sababta oo ah position: fixed, waxaa jira qaar ka mid ah digniinaha isticmaalka modal-ka aaladaha mobilada. Faahfaahinta ka eeg dokumentiyada taageerada browserkayaga .
  • Sababtoo ah sida HTML5 u qeexdo semantic-keeda, sifada autofocusHTML wax saameyn ah kuma laha hababka Bootstrap. Si loo gaaro saameyn isku mid ah, isticmaal qaar ka mid ah JavaScript caadadii:
const myModal = document.getElementById('myModal')
const myInput = document.getElementById('myInput')

myModal.addEventListener('shown.bs.modal', () => {
  myInput.focus()
})
Saamaynta animation ee qaybtani waxay ku xidhan tahay prefers-reduced-motionwaydiinta warbaahinta. Eeg qaybta dhaqdhaqaaqa la dhimay ee dukumeenti gelitaankeena .

Sii wad akhrinta bandhigyada iyo tilmaamaha isticmaalka.

Tusaalooyinka

Hoos waxaa ku yaal tusaale qaab-dhismeed taagan (macneheedu waa taas positionoo displaywaa la dhaafay). Waxaa ku jira madaxa qaab-dhismeedka, qaab-dhismeedka qaab-dhismeedka (loo baahan yahay padding), iyo habka cagta (ikhtiyaar). Waxaan ku waydiisanaynaa inaad ku darto madax habaysan oo leh ficilo la eryo mar kasta oo ay suurtagal tahay, ama aad bixiso tallaabo kale oo cad oo cayrin ah.

Magaca Modal

Modal qoraalka qoraalka ayaa halkan tagaa.

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

Muujinta tooska ah

Beddel qaabka shaqada adoo gujinaya badhanka hoose. Hoos ayay u soo degi doontaa oo waxay ka soo geli doontaa xagga sare ee bogga.

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

Dhabar taagan

Marka dhabarka dambe loo dhigo mid taagan, modalku ma xidhmi doono marka la gujinayo meel ka baxsan. Guji badhanka hoose si aad isugu daydo

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

Duubista nuxur dheer

Marka moodalku aad ugu dheeraado aragtida isticmaalaha ama aaladda, waxay u rogaan si madaxbannaan bogga laftiisa. Isku day demo hoose si aad u aragto waxa aanu ula jeedno.

Waxa kale oo aad samayn kartaa hab la-rogrogmi karo kaas oo kuu ogolaanaya in aad rogto modal jirka adiga oo ku .modal-dialog-scrollabledaraya .modal-dialog.

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

Mid toosan

Ku dar .modal-dialog-centeredsi .modal-dialogtoosan u dhexda habka

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

Tilmaamaha qalabka iyo popovers

Tilmaamaha qalabka iyo popovers waxaa lagu dhejin karaa qaab-dhismeedka hadba sida loo baahdo . Marka hababka la xidho, qalab kasta iyo wax-soo-saarka gudaha sidoo kale si toos ah ayaa loo ruqseeyaa.

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

Isticmaalka sharoobada

Ka faa'iidayso nidaamka xabagta Bootstrap gudaha qaab qaab adiga oo buul .container-fluidku dhex jira .modal-body. Kadibna, isticmaal fasalada nidaamka grid-ka caadiga ah sida aad u isticmaali lahayd meel kasta oo kale.

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

Nuxurka moodeelka oo kala duwan

Hayso farabadan badhamada kuwaas oo dhamaantood kicinaya qaab isku mid ah oo ka kooban waxyar oo kala duwan? Isticmaal event.relatedTargetiyo sifooyinka HTMLdata-bs-* si aad u kala duwanaansho waxa ku jira habka iyadoo ku xidhan badhanka la gujiyay.

Hoos waxaa ah demo toos ah oo ay ku xigto tusaale HTML iyo JavaScript. Wixii macluumaad dheeraad ah, akhri dukumeentiyada dhacdooyinka modal wixii faahfaahin ah 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
})

U beddel inta u dhaxaysa moodalka

U beddel inta u dhaxaysa qaabab badan oo leh meelayn xariif ah oo ah sifooyinka data-bs-targetiyo data-bs-togglesifooyinka. Tusaale ahaan, waxaad ka rogi kartaa habka dib u dejinta erayga sirta ah adigoo ka dhex rogi kara calaamad horay u furan. Fadlan ogow in qaabab badan aysan isku mar furmi karin - habkani wuxuu si fudud u kala rogaa laba nooc oo kala duwan.

Fur modal koowaad
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>

Beddel animation

Doorsoomuhu wuxuu $modal-fade-transformgo'aamiyaa xaaladda isbeddelka ka .modal-dialoghor inta aan modal-ku-dhamin animation-ka, $modal-show-transformdoorsoomuhu wuxuu go'aamiyaa isbeddelka .modal-dialogdhammaadka modal-ku-dhalashada animation-ka.

Haddii aad rabto tusaale ahaan animation-soo-jiid, waxaad dejin kartaa $modal-fade-transform: scale(.8).

Ka saar animation

Qaababka si fudud u muuqda halkii ay ka libdhi lahaayeen si loo eego, ka saar .fadefasalka calaamadaynta qaabkaaga.

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

Dhererka firfircoon

Haddii dhererka modalku is beddelo marka uu furan yahay, waa inaad wacdaa myModal.handleUpdate()si aad u hagaajiso booska modalka haddii ay dhacdo in bir-rogid u muuqato.

Helitaanka

Hubi inaad ku darto aria-labelledby="...", tixraaca cinwaanka modal .modal. Intaa waxaa dheer, waxaad ku siin kartaa sharaxaad ku saabsan wada-hadalka qaab- aria-describedbydhismeedka .modal. Ogsoonow inaadan u baahnayn inaad ku darto role="dialog"maadaama aan mar hore ku darnay JavaScript.

Ku darida fiidiyowyada YouTube

Ku darista fiidiyowyada YouTube ee moodooyinka waxay u baahan tahay JavaScript dheeraad ah oo aan ku jirin Bootstrap si ay si toos ah u joojiso dib-u-ciyaarista iyo wax ka badan. Fiiri qoraalkan waxtarka leh ee Stack Overflow wixii macluumaad dheeraad ah.

Cabbirrada ikhtiyaariga ah

Moodooyinka waxay leeyihiin saddex cabbir oo ikhtiyaari ah, oo lagu heli karo fasallada beddelka si loogu dhejiyo .modal-dialog. Xajmiyadani waxay ka soo galayaan meelo kala goyn gaar ah si ay uga fogaadaan biibitaannada toosan ee meelaha dhuuban ee daawashada.

Cabbirka Fasalka Moodal ballaca ugu badan
Yar .modal-sm 300px
Asal ahaan Midna 500px
Weyn .modal-lg 800px
Aad u weyn .modal-xl 1140px

Qaabkayaga caadiga ah ee aan lahayn fasalka wax ka beddelka ayaa ka kooban cabbirka cabbirka "dhexdhexaad ah".

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

Modal shaashad buuxda

Burburka kale waa ikhtiyaarka lagu soo saari karo qaab daboolaya muuqaalka isticmaalaha, oo laga heli karo fasallada wax ka beddelka ee lagu dhejiyay a .modal-dialog.

Fasalka Helitaanka
.modal-fullscreen Had iyo jeer
.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

Kala duwanaansho

Lagu daray v5.2.0

Iyada oo qayb ka ah habka isbeddelaya ee Bootstrap ee CSS, moodalku hadda waxay isticmaalaan doorsoomayaasha CSS ee maxalliga ah .modaliyo .modal-backdrophagaajinta wakhtiga-dhabta ah. Qiimaha doorsoomayaasha CSS waxa lagu dejiyay Sass, sidaa darteed habaynta Sass wali waa la taageerayaa, sidoo kale.

  --#{$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};

Doorsoomayaasha Sass

$modal-inner-padding:               $spacer;

$modal-footer-margin-between:       .5rem;

$modal-dialog-margin:               .5rem;
$modal-dialog-margin-y-sm-up:       1.75rem;

$modal-title-line-height:           $line-height-base;

$modal-content-color:               null;
$modal-content-bg:                  $white;
$modal-content-border-color:        var(--#{$prefix}border-color-translucent);
$modal-content-border-width:        $border-width;
$modal-content-border-radius:       $border-radius-lg;
$modal-content-inner-border-radius: subtract($modal-content-border-radius, $modal-content-border-width);
$modal-content-box-shadow-xs:       $box-shadow-sm;
$modal-content-box-shadow-sm-up:    $box-shadow;

$modal-backdrop-bg:                 $black;
$modal-backdrop-opacity:            .5;

$modal-header-border-color:         var(--#{$prefix}border-color);
$modal-header-border-width:         $modal-content-border-width;
$modal-header-padding-y:            $modal-inner-padding;
$modal-header-padding-x:            $modal-inner-padding;
$modal-header-padding:              $modal-header-padding-y $modal-header-padding-x; // Keep this for backwards compatibility

$modal-footer-bg:                   null;
$modal-footer-border-color:         $modal-header-border-color;
$modal-footer-border-width:         $modal-header-border-width;

$modal-sm:                          300px;
$modal-md:                          500px;
$modal-lg:                          800px;
$modal-xl:                          1140px;

$modal-fade-transform:              translate(0, -50px);
$modal-show-transform:              none;
$modal-transition:                  transform .3s ease-out;
$modal-scale-transform:             scale(1.02);

Loop

Qaababka shaashada buuxda ee ka jawaabaya waxaa lagu soo saaray $breakpointskhariidada iyo wareegga gudaha 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;
      }
    }
  }
}

Isticmaalka

Plugin-ka moodeelku wuxuu beddelaa macluumaadkaaga qarsoon ee baahida, iyada oo loo marayo sifooyinka xogta ama JavaScript. Waxa kale oo ay meesha ka saaraysaa hab-dhaqanka-rogid-rogid aan fiicneyn oo waxay soo saartaa a .modal-backdropsi ay u bixiso aag gujis ah oo lagu eryo moodooyinka la soo bandhigay marka la gujinayo meel ka baxsan habka.

Iyada oo loo marayo sifooyinka xogta

Bedeli

Dhaqdhaqaaqa modal adigoon qorin JavaScript. Deji curiyaha data-bs-toggle="modal"kontoroolka, sida badhan, oo ay la socoto a data-bs-target="#foo"ama href="#foo"si aad u beegsato hab gaar ah si aad u leexiso.

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

Eryi

Cayrinta waxaa lagu gaari karaa datasifada ku taal badhan ku dhex jira qaabka sida hoos ku cad:

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

ama ku dheji badhan ka baxsan nidaamka adigoo isticmaalaya data-bs-targetsida hoos ku cad:

<button type="button" class="btn-close" data-bs-dismiss="modal" data-bs-target="#my-modal" aria-label="Close"></button>
Iyadoo labada dariiqo ee shaqada looga cayrinayo habraaca la taageeray, maskaxda ku hay in ka eryida hab ka baxsan habraaca aysan ku habboonayn habka ARIA Hababka Hababka Qorista ee wada hadalka (habka) . Taas ku samee khatartaada.

Iyadoo loo marayo JavaScript

Samee modal leh hal xariiq oo JavaScript ah:

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

Ikhtiyaarada

Sida xulashooyinka loogu gudbi karo sifooyinka xogta ama JavaScript, waxaad ku dari kartaa magaca ikhtiyaarka ah data-bs-, sida ku jira data-bs-animation="{value}". Hubi inaad ka beddesho nooca kiis ee magaca ikhtiyaarka " camelCase " una beddelo " kebab-case " markaad ikhtiyaarka ku gudbinayso sifooyinka xogta. Tusaale ahaan, isticmaal data-bs-custom-class="beautifier"bedelkii data-bs-customClass="beautifier".

Marka la eego Bootstrap 5.2.0, dhammaan qaybaha waxay taageeraan sifada xogta kaydsan ee tijaabadadata-bs-config ah taas oo u dejin karta qaabaynta qaybaha fudud sida xadhig JSON ah. Marka curiye leeyahay data-bs-config='{"delay":0, "title":123}'iyo data-bs-title="456"sifooyin, titleqiimaha kama dambaysta ahi waxa uu ahaan doonaa 456sifada xogta goonida ahina waxa ay meesha ka saari doontaa qiyamka lagu bixiyo data-bs-config. Intaa waxaa dheer, sifada xogta hadda jirta waxay awood u leedahay inay ku noolaato qiyamka JSON sida data-bs-delay='{"show":0,"hide":150}'.

Magaca Nooca Asal ahaan Sharaxaada
backdrop boolean,'static' true Waxaa ka mid ah curiyaha qaab-dhabeedka. Beddelkeeda, sheeg staticmeel-dambe oo aan xidhin habka marka la gujiyo.
focus booliyan true Diirada saara habka marka la bilaabayo.
keyboard booliyan true Wuxuu xidhaa habka marka furaha baxsadka la riixo.

Hababka

Hababka iyo kala-guurka aan isku midka ahayn

Dhammaan hababka API waa isku mid waxayna bilaabaan kala-guurka . Waxay ku soo noqdaan qofka soo wacaya isla markii uu bilaabmo kala-guurka laakiin ka hor inta uusan dhammaan . Intaa waxaa dheer, hab ku baaqaya in qayb ka beddelka waa la iska indhatiray .

Ka eeg dukumeentiyada JavaScript wixii macluumaad dheeraad ah .

Gudbinta ikhtiyaarada

Waxay u hawlgelisaa macluumaadkaaga qaab habaysan. Aqbala ikhtiyaarka ikhtiyaariga ah object.

const myModal = new bootstrap.Modal('#myModal', {
  keyboard: false
})
Habka Sharaxaada
dispose Wuxuu baabi'iyaa habka curiyaha. (Waxay tirtirtaa xogta kaydsan ee cunta DOM)
getInstance Habka taagan kaas oo kuu ogolaanaya inaad hesho tusaalaha moodeelka ee la xidhiidha curiyaha DOM.
getOrCreateInstance Habka taagan kaas oo kuu ogolaanaya inaad hesho tusaalaha moodeelka ee la xidhiidha curiyaha DOM, ama abuurto mid cusub haddii aan la bilaabin.
handleUpdate Gacanta ku hagaaji booska modalka haddii dhererka modalku is beddelo marka uu furan yahay (tusaale waa haddii uu baalku muuqdo).
hide Gacanta ayaa u qarisa habka. Ku soo noqoshada soo wacaha ka hor inta aan habka dhabta ah la qarin (ie ka hor intaanay hidden.bs.modaldhacdada dhicin).
show Gacanta ayaa u fura modal Ku soo noqoshada soo wacaha ka hor inta aan qaabka dhabta ah loo muujin (tusaale ka hor intaanay shown.bs.modaldhacdada dhicin). Sidoo kale, waxaad u gudbin kartaa walxaha DOM dood ahaan taas oo lagu heli karo dhacdooyinka moodeelka ( relatedTargethanti ahaan). (sida const modalToggle = document.getElementById('toggleMyModal'); myModal.show(modalToggle).
toggle Gacanta ayaa u roga modal Ku soo noqda qofka soo wacay ka hor inta aan habka dhabta ah la muujin ama aan la qarin (tusaale ka hor inta aanay dhicin shown.bs.modalama hidden.bs.modaldhacdada).

Dhacdooyinka

Bootstrap's modal class wuxuu daaha ka qaadaa dhowr dhacdo oo loogu talagalay in lagu xidho shaqaynta modal. Dhammaan dhacdooyinka modal waxa lagu eryaa habka laftiisa (ie at the <div class="modal">).

Dhacdo Sharaxaada
hide.bs.modal Dhacdadan ayaa isla markaaba la eryaa marka hidehabka tusaale ahaan loo waco.
hidden.bs.modal Dhacdadan waxa la eryaa marka modalku dhammeeyo in laga qariyo isticmaalaha (waxay sugi doontaa inta uu CSS ka gudbayo dhamaystirka).
hidePrevented.bs.modal Dhacdadan ayaa la eryaa marka qaabka la tuso, gadaashiisa dhabarku yahay staticiyo gujin ka baxsan nidaamka ayaa la sameeyaa. Dhacdada ayaa sidoo kale la eryaa marka furaha baxsadka la riixo oo keyboardikhtiyaarka loo dejiyo false.
show.bs.modal Dhacdadani waxay isla markaaba gubataa marka showhabka tusaalaha la yiraahdo. Haddi ay keento gujis, cunsurka la gujiyay ayaa diyaar u ah relatedTargethantida dhacdada.
shown.bs.modal Dhacdadan waxa la eryaa marka habka loo muujiyo isticmaalaha (waxa ay sugi doontaa inta uu CSS ku wareejinayo dhamaystirka). Haddi ay keento gujis, cunsurka la gujiyay ayaa diyaar u ah relatedTargethantida dhacdada. 
const myModalEl = document.getElementById('myModal')
myModalEl.addEventListener('hidden.bs.modal', event => {
  // do something...
})