Modal
Diriša polaka ya mokgwa wa JavaScript ya Bootstrap go oketša dipoledišano saeteng ya gago bakeng sa mapokisi a seetša, ditsebišo tša modiriši, goba diteng tša tlwaelo ka mo go feletšego.
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.modal
ka 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
autofocus
HTML ga se na mafelelo ka go dimodal tša Bootstrap. Go fihlelela mafelelo a swanago, diriša JavaScript e itšego ya tlwaelo:
var myModal = document.getElementById('myModal')
var myInput = document.getElementById('myInput')
myModal.addEventListener('shown.bs.modal', function () {
myInput.focus()
})
prefers-reduced-motion
potš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
Dikarolo tša Modal
Ka tlase ke mohlala wa modal wa go se fetogeposition
(go ra gore wa yona le display
ba fedile ka thoko). Go akareditšwe ke 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.
<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-scrollable
go .modal-dialog
.
<!-- Scrollable modal -->
<div class="modal-dialog modal-dialog-scrollable">
...
</div>
E tsepame thwii
Oketša .modal-dialog-centered
go .modal-dialog
go 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 popover-test" title="Popover title" data-bs-content="Popover body content is set in this attribute.">button</a> triggers a popover on click.</p>
<hr>
<h5>Tooltips in a modal</h5>
<p><a href="#" class="tooltip-test" title="Tooltip">This link</a> and <a href="#" class="tooltip-test" title="Tooltip">that link</a> have tooltips on hover.</p>
</div>
Go diriša keriti
Diriša tshepedišo ya keriti ya Bootstrap ka gare ga modal ka go bea dihlaga .container-fluid
ka 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.relatedTarget
le 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
.
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" data-bs-whatever="@mdo">Open modal for @mdo</button>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" data-bs-whatever="@fat">Open modal for @fat</button>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" data-bs-whatever="@getbootstrap">Open modal for @getbootstrap</button>
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">New message</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<form>
<div class="mb-3">
<label for="recipient-name" class="col-form-label">Recipient:</label>
<input type="text" class="form-control" id="recipient-name">
</div>
<div class="mb-3">
<label for="message-text" class="col-form-label">Message:</label>
<textarea class="form-control" id="message-text"></textarea>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Send message</button>
</div>
</div>
</div>
</div>
var exampleModal = document.getElementById('exampleModal')
exampleModal.addEventListener('show.bs.modal', function (event) {
// Button that triggered the modal
var button = event.relatedTarget
// Extract info from data-bs-* attributes
var recipient = button.getAttribute('data-bs-whatever')
// If necessary, you could initiate an AJAX request here
// and then do the updating in a callback.
//
// Update the modal's content.
var modalTitle = exampleModal.querySelector('.modal-title')
var modalBodyInput = exampleModal.querySelector('.modal-body input')
modalTitle.textContent = 'New message to ' + recipient
modalBodyInput.value = recipient
})
Toggle pakeng tsa modals
Toggle pakeng tsa modal multiple le ba bang ba bohlale beha ya data-bs-target
le data-bs-toggle
litš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.
<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-transform
fetohang e laola boemo ba fetola ba .modal-dialog
pele ho modal fifala-ka animatsioon, $modal-show-transform
phetoho e laola phetoho ea .modal-dialog
qetellong 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 .fade
sehlopha 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-describedby
go .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 |
Ka fase576px |
.modal-fullscreen-md-down |
Ka fase768px |
.modal-fullscreen-lg-down |
Ka fase992px |
.modal-fullscreen-xl-down |
Ka fase1200px |
.modal-fullscreen-xxl-down |
Ka fase1400px |
<!-- Full screen modal -->
<div class="modal-dialog modal-fullscreen-sm-down">
...
</div>
Sass
Diphetogo
$modal-inner-padding: $spacer;
$modal-footer-margin-between: .5rem;
$modal-dialog-margin: .5rem;
$modal-dialog-margin-y-sm-up: 1.75rem;
$modal-title-line-height: $line-height-base;
$modal-content-color: null;
$modal-content-bg: $white;
$modal-content-border-color: rgba($black, .2);
$modal-content-border-width: $border-width;
$modal-content-border-radius: $border-radius-lg;
$modal-content-inner-border-radius: subtract($modal-content-border-radius, $modal-content-border-width);
$modal-content-box-shadow-xs: $box-shadow-sm;
$modal-content-box-shadow-sm-up: $box-shadow;
$modal-backdrop-bg: $black;
$modal-backdrop-opacity: .5;
$modal-header-border-color: $border-color;
$modal-footer-border-color: $modal-header-border-color;
$modal-header-border-width: $modal-content-border-width;
$modal-footer-border-width: $modal-header-border-width;
$modal-header-padding-y: $modal-inner-padding;
$modal-header-padding-x: $modal-inner-padding;
$modal-header-padding: $modal-header-padding-y $modal-header-padding-x; // Keep this for backwards compatibility
$modal-sm: 300px;
$modal-md: 500px;
$modal-lg: 800px;
$modal-xl: 1140px;
$modal-fade-transform: translate(0, -50px);
$modal-show-transform: none;
$modal-transition: transform .3s ease-out;
$modal-scale-transform: scale(1.02);
Segole
Di-modal tša skrine se se tletšego tšeo di arabelago di tšweletšwa ka $breakpoints
mmapa 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 {
@include border-radius(0);
}
.modal-body {
overflow-y: auto;
}
.modal-footer {
@include border-radius(0);
}
}
}
}
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-backdrop
go 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
Toggle
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 data
seka 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-target
bjalo 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>
Ka JavaScript
Hlama modal ka mola o tee wa JavaScript:
var myModal = new bootstrap.Modal(document.getElementById('myModal'), options)
Dikgetho
Dikgetho di ka fetišwa ka dika tša datha goba JavaScript. Bakeng sa dika tša datha, tlaleletša leina la kgetho go data-bs-
, bjalo ka go data-bs-backdrop=""
.
Leina | Mohuta | Hlokomologa | Tlhalošo |
---|---|---|---|
backdrop |
boolean goba thapo'static' |
true |
E akaretša elemente ya modal-backdrop. Ka go fapana le moo, laetša static bakeng sa backdrop yeo e sa tswalelego modal ka go klika. |
keyboard |
boolean ya go swana | true |
E tswalela modal ge senotlelo sa go tšhaba se tobetšwe |
focus |
boolean ya go swana | true |
E bea tsepamiso ya kgopolo go modal ge e thongwa. |
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
.
var myModal = new bootstrap.Modal(document.getElementById('myModal'), {
keyboard: false
})
go fetola
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.modal
goba hidden.bs.modal
e direga).
myModal.toggle()
bontšha
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.modal
tiragalo e direga).
myModal.show()
Gape, o ka fetiša elemente ya DOM bjalo ka ngangišano yeo e ka amogelwago ka ditiragalong tša modal (bjalo ka relatedTarget
thepa).
var modalToggle = document.getElementById('toggleMyModal') // relatedTarget
myModal.show(modalToggle)
fihla
Ka seatla e pata modal. E boela go mogala pele ga ge modal e tloga e utilwe (ke gore pele ga ge hidden.bs.modal
tiragalo e direga).
myModal.hide()
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).
myModal.handleUpdate()
lahla
E senya modal ya elemente. (E tloša ya data ye e bolokilwego go elemente ya DOM)
myModal.dispose()
hwetšaMohlala
Mokgwa wa go se fetoge wo o go dumelelago go hwetša mohlala wa modal wo o amanago le elemente ya DOM
var myModalEl = document.getElementById('myModal')
var modal = bootstrap.Modal.getInstance(myModalEl) // Returns a Bootstrap modal instance
hwetšaGobaHlamaMohlala
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
var myModalEl = document.querySelector('#myModal')
var modal = bootstrap.Modal.getOrCreateInstance(myModalEl) // Returns a Bootstrap modal instance
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">
).
Mohuta wa tiragalo | Tlhalošo |
---|---|
show.bs.modal |
Tiragalo ye e thunya ka pela ge show mokgwa wa mohlala o bitšwa. Ge e bakwa ke go klika, elemente ye e klikilwego e hwetšagala bjalo ka relatedTarget thepa 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 relatedTarget thepa ya tiragalo. |
hide.bs.modal |
Tiragalo ye e thuntšhwa ka pela ge hide mokgwa 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, mokokotlo wa yona ke static gomme go klika ka ntle ga modal goba go tobetša senotlelo sa go tšhaba go dirwa ka kgetho ya khiiboto goba data-bs-keyboard e beakantšwe go false . |
var myModalEl = document.getElementById('myModal')
myModalEl.addEventListener('hidden.bs.modal', function (event) {
// do something...
})