Tlolela go diteng tše kgolo Tlolela go docs navigation
Check
in English

Modal

Šomiša Bootstrap ya JavaScript modal plugin go oketša dipoledišano setšeng sa gago bakeng sa mapokisi a seetša, ditsebišo tša mosediriši, goba diteng tša tlwaelo ka botlalo.

Letlakaleng le

Kamoo e šomago ka gona

Pele o thoma ka karolo ya modal ya Bootstrap, kgonthišetša gore o bala tše di latelago ka ge dikgetho tša rena tša thepo di sa tšwa go fetoga.

  • Di-modal di agilwe ka HTML, CSS, le JavaScript. Ba beilwe godimo ga se sengwe le se sengwe ka go tokomane gomme ba tloša go phutholla go tšwa go <body>gore diteng tša modal di phutholle go e na le moo.
  • Tobetsa ka modal “backdrop” tla ka tsela e iketsang koala modal.
  • Bootstrap e thekga feela lefasetere le tee la modal ka nako. Di-modal tše di tsentšwego ka gare ga di-nested ga di thekgwe ka ge re dumela gore ke maitemogelo a mabe a modiriši.
  • Modals use position: fixed, yeo ka dinako tše dingwe e ka bago e kgethegilego go se nene ka phetolelo ya yona. Nako le nako ge go kgonega, bea HTML ya gago ya modal maemong a maemo a godimo go efoga tšhitišo yeo e ka bago gona go tšwa go dielemente tše dingwe. Go na le kgonagalo ya gore o tla thulana le ditaba ge o bea a .modalka gare ga elemente ye nngwe ye e sa fetogego.
  • Hape, ka lebaka la position: fixed, ho na le ba bang ba caveats le ho sebelisa modals ka disebediswa tsa selefouno. Bona ditokomane tša rena tša thekgo ya sephephediši bakeng sa dintlha.
  • Ka lebaka la ka moo HTML5 e hlalošago semantiki ya yona, seka sa autofocusHTML ga se na mafelelo ka go dimodal tša Bootstrap. Go fihlelela mafelelo a swanago, diriša JavaScript e itšego ya tlwaelo:
const myModal = document.getElementById('myModal')
const myInput = document.getElementById('myInput')

myModal.addEventListener('shown.bs.modal', () => {
  myInput.focus()
})
Phello ya dipopaye ya karolo ye e ithekgile ka prefers-reduced-motionpotšišo ya methopo ya ditaba. Bona karolo ya tšhišinyego ye e fokoditšwego ya ditokomane tša rena tša phihlelelo .

Tšwela pele o bala bakeng sa di-demo le ditlhahlo tša tšhomišo.

Mehlala

Ka tlase ke mohlala o sa fetoheng wa modal (ho bolelang hore lona positionle displayba 'nile ba overridden). Go akaretšwa hlogo ya modal, mmele wa modal (o nyakegago bakeng sa padding), le letlakala la ka tlase la modal (ya boikgethelo). Re kgopela gore o akaretše dihlogo tša modal ka ditiro tša go raka neng le neng ge go kgonega, goba o nee kgato ye nngwe ya go raka ye e lego pepeneneng.

Thaetlele ya Modal

Sengwalwa sa mmele sa modal se ya mo.

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

Toggle e sebetsang modal demo ka ho tobetsa konopo e ka tlase. E tla thelela fase gomme ya fifala ka gare go tšwa godimo ga letlakala.

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

Lemorago la go se fetoge

Ge backdrop e beakantšwe go static, modal e ka se tswalele ge o klika ka ntle ga yona. Tobetsa konopo e ka tlase ho e leka.

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

Go kgokološa diteng tše telele

Ge di-modal di e-ba tše telele kudu bakeng sa lefelo la go lebelela la modiriši goba sedirišwa, di sepelasepela di ikemetše ka letlakaleng ka bolona. Leka demo ye e lego ka mo tlase go bona seo re se bolelago.

O ka hlama gape le modal ye e ka kgokologago yeo e dumelelago go sepelasepela mmele wa modal ka go tlaleletša .modal-dialog-scrollablego .modal-dialog.

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

E tsepame thwii

Oketša .modal-dialog-centeredgo .modal-dialoggo thwii bogareng bja modal.

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

Dikeletšo tša didirišwa le di-popovers

Tooltips le popovers di ka bewa ka gare ga modals ge go nyakega. Ge di-modal di tswalelwa, didirišwa dife goba dife le di-popover ka gare le tšona di a lahlwa ka go iketla.

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

Go diriša keriti

Diriša tshepedišo ya keriti ya Bootstrap ka gare ga modal ka go bea dihlaga .container-fluidka gare ga .modal-body. Ka morago, diriša diklase tše di tlwaelegilego tša tshepedišo ya keriti bjalo ka ge o be o tla dira kae goba kae.

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

Diteng tša modal tše di fapanego

Na o na le sehlopha sa dikonope tšeo ka moka di hlohleletšago modal e swanago ka dikagare tše di fapanego ganyenyane? Šomiša event.relatedTargetle dika tša HTMLdata-bs-* go fapantšha dikagare tša modal go ya ka gore ke konope efe yeo e klikilwego.

Ka tlase ke demo e phelang e latelwa ke mohlala HTML le JavaScript. Bakeng sa tshedimošo ye ntši, bala ditokomane tša ditiragalo tša modal bakeng sa dintlha ka ga 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
})

Toggle pakeng tsa modals

Toggle pakeng tsa modal multiple le ba bang ba bohlale beha ya data-bs-targetle data-bs-togglelitšobotsi. Ka mohlala, o ka fetola modal ya go seta gape phasewete go tšwa ka gare ga leswao leo le šetšego le bulegile ka gare ga modal. Hle ela hloko gore di-modal tše dintši di ka se bulege ka nako e tee —mokgwa wo o fo fetoša magareng ga di-modal tše pedi tše di aroganego.

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

Fetola ditshwantsho tse di phelang

The feto- $modal-fade-transformfetohang e laola boemo ba fetola ba .modal-dialogpele ho modal fifala-ka animatsioon, $modal-show-transformphetoho e laola phetoho ea .modal-dialogqetellong ea modal fifala-ka animatsioon.

Ge o nyaka mohlala animation ya go godiša, o ka beakanya $modal-fade-transform: scale(.8).

Tlosa ditshwantsho tse di phelang

Bakeng sa di-modal tšeo di fo tšwelelago go e na le go fifala ka gare go lebelela, tloša .fadesehlopha go tšwa go leswao la gago la modal.

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

Bophahamo ba mafolofolo

Ge e le gore bophagamo bja modal bo fetoga ge e bulegile, o swanetše go bitša myModal.handleUpdate()go beakanya gape maemo a modal ge go ka direga gore go tšwelele bara ya go sepelasepela.

Phihlelelo

Kgonthiša gore o tlaleletša aria-labelledby="...", o šupa sehlogo sa modal, go .modal. Go tlaleletša, o ka fa tlhalošo ya poledišano ya gago ya modal ka aria-describedbygo .modal. Hlokomela gore ga go nyakege gore o tlaleletše role="dialog"ka ge re šetše re e tlaleletša ka JavaScript.

Go tsenya dibidio tša YouTube

Go tsenya dibidio tša YouTube ka gare ga modals go nyaka JavaScript ya tlaleletšo e sego ka go Bootstrap go emiša ka go iketla go bapala le tše dingwe. Bona poso ye e thušago ya Stack Overflow bakeng sa tshedimošo e oketšegilego.

Bogolo bja boikgethelo

Di-modal di na le bogolo bjo bo tharo bja boikhethelo, bjo bo hwetšagalago ka dihlopha tša sefetoši tšeo di tlago go bewa godimo ga .modal-dialog. Bogolo bjo bo tsena ka gare ga mafelo a itšego a go kgaotša go efoga dibara tša go sepelasepela tše di rapaletšego go dipono tše tshesane.

Bogolo Phapoši Modal max-bophara
Nnyane .modal-sm 300px
Hlokomologa Ga go selo 500px
Kgolo .modal-lg 800px
E kgolo e eketsehileng .modal-xl 1140px

Modal ya rena ya go se fetoge ntle le sehlopha sa sefetoši se bopa modal ya bogolo bja “magareng”.

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

Modal ya skrine se se tletšego

Go tloša mo gongwe ke kgetho ya go tšwelela modal yeo e akaretšago lefelo la go lebelela la mosediriši, leo le hwetšagalago ka dihlopha tša sefetoši tšeo di beilwego godimo ga .modal-dialog.

Phapoši Go hwetšagala
.modal-fullscreen Ka mehla
.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

Diphetogo

E okeditšwe ka go v5.2.0

Bjalo ka karolo ya mokgwa wa diphetogo tša CSS wo o tšwelelago wa Bootstrap, dimodal bjale di šomiša diphetogo tša CSS tša selegae godimo .modalle .modal-backdropbakeng sa go tlwaetša nako ya nnete ye e kaonafetšego. Ditekanyetšo tša diphetogo tša CSS di beakantšwe ka Sass, ka fao go tlwaetša Sass go sa thekgwa, le gona.

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

Diphetogo tša 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);

Segole

Di-modal tša skrine se se tletšego tšeo di arabelago di tšweletšwa ka $breakpointsmmapa le seloupu ka 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;
      }
    }
  }
}

Tšhomišo

Plugin ya modal e fetoša diteng tša gago tše di utilwego ge di nyakega, ka dika tša datha goba JavaScript. E bile e tloša boitshwaro bja go kgokološa bja go se fetoge gomme e tšweletša a .modal-backdropgo fa lefelo la go klika bakeng sa go lahla di-modal tše di bontšhitšwego ge o kgotla ka ntle ga modal.

Ka dika ya data

Fetola

Dira gore modal e šome ntle le go ngwala JavaScript. Beakanya data-bs-toggle="modal"godimo ga elemente ya molaodi, go swana le konope, gotee le data-bs-target="#foo"goba href="#foo"go nepiša modal ye e itšego go fetola.

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

Raka

Go rakwa go ka fihlelelwa ka dataseka godimo ga konope ka gare ga modal bjalo ka ge go bontšhitšwe ka mo tlase:

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

goba godimo ga konope ka ntle ga modal o šomiša data-bs-targetbjalo ka ge go bontšhitšwe ka mo tlase:

<button type="button" class="btn-close" data-bs-dismiss="modal" data-bs-target="#my-modal" aria-label="Close"></button>
Le ge ditsela tše ka bobedi tša go raka modal di thekgwa, dula o gopola gore go raka go tšwa ka ntle ga modal ga go swane le mohlala wa poledišano (modal) ya Tlhahlo ya Mekgwa ya Bongwadi ya ARIA . Dira se ka go ipea kotsing.

Ka JavaScript

Hlama modal ka mola o tee wa JavaScript:

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

Dikgetho

Bjalo ka ge dikgetho di ka fetišwa ka dika tša datha goba JavaScript, o ka tlaleletša leina la kgetho go data-bs-, bjalo ka go data-bs-animation="{value}". Kgonthiša gore o fetoša mohuta wa molato wa leina la kgetho go tšwa go “ camelCase ” go ya go “ kebab-case ” ge o fetiša dikgetho ka dika tša datha. Ka mohlala, diriša data-bs-custom-class="beautifier"go e na le data-bs-customClass="beautifier".

Go tloga go Bootstrap 5.2.0, dikarolo ka moka di thekga seka sa datha ye e bolokilwego ya tekodata-bs-config yeo e ka beago peakanyo ya karolo ye bonolo bjalo ka thapo ya JSON. Ge elemente e na data-bs-config='{"delay":0, "title":123}'le le data-bs-title="456"dika, boleng bja mafelelo titlee tla ba 456gomme dika tša datha tše di aroganego di tla phaela ka thoko boleng bjo bo filwego go data-bs-config. Go tlaleletša, dika tša datha tše di lego gona di kgona go bea dikelo tša JSON go swana le data-bs-delay='{"show":0,"hide":150}'.

Leina Mohuta Hlokomologa Tlhalošo
backdrop boolean, .'static' true E akaretša elemente ya modal-backdrop. Ka go fapana le moo, laetša staticbakeng sa backdrop yeo e sa tswalelego modal ge e kgotla.
focus boolean ya go swana true E bea tsepamiso ya kgopolo go modal ge e thongwa.
keyboard boolean ya go swana true E tswalela modal ge senotlelo sa go tšhaba se tobetšwe.

Mekgwa ya go šoma

Mekgwa ya asynchronous le diphetogo

Mekgwa ka moka ya API ga e na asynchronous gomme e thoma phetogo . Ba boela go motho yo a leletšago mogala gateetee ge phetogo e thomilwe eupša pele e fela . Go tlaleletša, pitšo ya mokgwa go karolo ya phetogo e tla hlokomologwa .

Bona ditokomane tša rena tša JavaScript bakeng sa tshedimošo e oketšegilego .

Dikgetho tša go feta

E dira gore diteng tša gago di šome bjalo ka modal. E amogela dikgetho tša boikhethelo object.

const myModal = new bootstrap.Modal('#myModal', {
  keyboard: false
})
Mokgwa Tlhalošo
dispose E senya modal ya elemente. (E tloša ya data ye e bolokilwego go elemente ya DOM)
getInstance Mokgwa wa go se fetoge wo o go dumelelago go hwetša mohlala wa modal wo o amanago le elemente ya DOM.
getOrCreateInstance Mokgwa wa go se fetoge wo o go dumelelago go hwetša mohlala wa modal wo o amanago le elemente ya DOM, goba go hlama ye mpsha ge go ka direga gore e be e sa thongwa.
handleUpdate Beakanya gape ka seatla maemo a modal ge e le gore bophagamo bja modal bo fetoga ge e bulegile (ke gore ge go ka direga gore go tšwelele bara ya go sepelasepela).
hide Ka seatla e pata modal. E boela go mogala pele ga ge modal e tloga e utilwe (ke gore pele ga ge hidden.bs.modaltiragalo e direga).
show Ka letsoho bula e modal. E boela go mogala pele ga ge modal e bontšhitšwe e le ka kgonthe (ke gore pele ga ge shown.bs.modaltiragalo e direga). Gape, o ka fetiša elemente ya DOM bjalo ka ngangišano yeo e ka amogelwago ka ditiragalong tša modal (bjalo ka relatedTargetthepa). (ke gore const modalToggle = document.getElementById('toggleMyModal'); myModal.show(modalToggle).
toggle Ka seatla e fetola modal. E boela go mogala pele ga ge modal e tloga e bontšhitšwe goba e utilwe (ke gore pele ga ge tiragalo ya shown.bs.modalgoba hidden.bs.modale direga).

Ditiragalo

Bootstrap o modal sehlopha pepesa liketsahalo tse seng kae bakeng sa hooking ka modal tshebetso. Ditiragalo ka moka tša modal di thuntšhwa go modal ka boyona (ke gore go <div class="modal">).

Tiragalo Tlhalošo
hide.bs.modal Tiragalo ye e thuntšhwa ka pela ge hidemokgwa wa mohlala o biditšwe.
hidden.bs.modal Tiragalo ye e thuntšhwa ge modal e feditše go utollwa go tšwa go modiriši (e tla emela gore diphetogo tša CSS di phethe).
hidePrevented.bs.modal Tiragalo ye e thuntšhwa ge modal e bontšhwa, backdrop ya yona e staticle gomme go dirwa go kgotla ka ntle ga modal. Tiragalo e a thuntšhwa gape ge senotlelo sa go tšhaba se tobetšwa gomme keyboardkgetho e beakantšwe go false.
show.bs.modal Tiragalo ye e thunya ka pela ge showmokgwa wa mohlala o bitšwa. Ge e bakwa ke go klika, elemente ye e klikilwego e hwetšagala bjalo ka relatedTargetthepa ya tiragalo.
shown.bs.modal Tiragalo ye e thuntšhwa ge modal e dirilwe gore e bonagale go modiriši (e tla emela gore diphetogo tša CSS di phethe). Ge e bakwa ke go klika, elemente ye e klikilwego e hwetšagala bjalo ka relatedTargetthepa ya tiragalo. 
const myModalEl = document.getElementById('myModal')
myModalEl.addEventListener('hidden.bs.modal', event => {
  // do something...
})