Modal
Bootstrap نىڭ JavaScript مودېل قىستۇرمىسىنى ئىشلىتىپ تور بېتىڭىزگە نۇر ساندۇقى ، ئىشلەتكۈچى ئۇقتۇرۇشى ياكى پۈتۈنلەي ئىختىيارى مەزمۇن ئۈچۈن دىئالوگ قوشۇڭ.
قانداق ئىشلەيدۇ
Bootstrap نىڭ مودېل زاپچاسلىرىنى باشلاشتىن بۇرۇن ، تىزىملىك تاللانمىلىرىمىزنىڭ يېقىندا ئۆزگەرگەنلىكى ئۈچۈن تۆۋەندىكىلەرنى ئوقۇڭ.
- مودېللار HTML ، CSS ۋە JavaScript بىلەن ياسالغان. ئۇلار ھۆججەتتىكى باشقا نەرسىلەرنىڭ ھەممىسىگە ئورۇنلاشتۇرۇلغان بولۇپ
<body>
، مودېل مەزمۇنى ئۇنىڭ ئورنىغا ئۆرۈلۈپ كېتىدۇ. - مودېل «ئارقا كۆرۈنۈش» نى باسسىڭىز مودېلنى ئاپتوماتىك تاقايدۇ.
- Bootstrap بىرلا ۋاقىتتا بىرلا مودېل كۆزنەكنى قوللايدۇ. ئۇلانغان مودېللارنى قوللىمايدۇ ، چۈنكى بىز ئۇلارنى ناچار ئىشلەتكۈچى تەجرىبىسى دەپ قارايمىز.
- مودېللار ئىشلىتىلىدۇ
position: fixed
، بەزىدە ئۇنىڭ كۆرسىتىلىشىدە سەل ئالاھىدە بولۇشى مۇمكىن. مۇمكىنقەدەر مودېل HTML نى يۇقىرى قاتلامغا قويۇپ ، باشقا ئېلېمېنتلارنىڭ ئارىلىشىشىدىن ساقلىنىڭ..modal
باشقا مۇقىم ئېلېمېنتنىڭ ئىچىگە ئۇۋا قويغاندا مەسىلىگە يولۇقۇشىڭىز مۇمكىن . - يەنە بىر قېتىم ، سەۋەبىدىن ،
position: fixed
كۆچمە ئۈسكۈنىلەردە مودېل ئىشلىتىش ئارقىلىق بەزى ئۆڭكۈرلەر بار. تەپسىلاتىنى تور كۆرگۈمىزنىڭ قوللاش ھۆججىتىدىن كۆرۈڭ. - HTML5 نىڭ مەنىسىنى قانداق ئېنىقلىغانلىقى ئۈچۈن ،
autofocus
HTML خاسلىقىنىڭ Bootstrap مودىلىدا ھېچقانداق رولى يوق. ئوخشاش ئۈنۈمگە ئېرىشىش ئۈچۈن ، بىر قىسىم خاس JavaScript نى ئىشلىتىڭ:
var myModal = document.getElementById('myModal')
var myInput = document.getElementById('myInput')
myModal.addEventListener('shown.bs.modal', function () {
myInput.focus()
})
prefers-reduced-motion
مېدىيا سوئالىغا باغلىق. قولايلىق ھۆججەتلىرىمىزنىڭ قىسقارتىلغان ھەرىكەت بۆلىكىنى كۆرۈڭ
.
كۆرسەتمە ۋە ئىشلىتىش قوللانمىلىرىنى داۋاملىق ئوقۇپ بېقىڭ.
مىساللار
مودېل زاپچاسلىرى
تۆۋەندىكىسى تۇراقلىق مودېل مىسالى (ئۇنىڭ مەنىسى position
ۋە display
قاپلاپ كەتتى). بۇنىڭ ئىچىدە مودېل ماۋزۇ ، مودېل گەۋدە (تەلەپ قىلىنىدۇ padding
) ۋە مودېل بەت ئاستى (ئىختىيارىي) بار. ئىمكانقەدەر ئىشتىن بوشىتىش ھەرىكەتلىرى بىلەن مودېل ماۋزۇلارنى قوشۇشىڭىزنى ياكى باشقا ئوچۇق-ئاشكارە ئىشتىن بوشىتىش ھەرىكىتىنى تەمىنلىشىڭىزنى سورايمىز.
<div class="modal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p>Modal body text goes here.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
Live demo
تۆۋەندىكى كۇنۇپكىنى بېسىش ئارقىلىق خىزمەت مودىلىنى كۆرسەت. ئۇ سىيرىلىپ بەتنىڭ ئۈستىدىن سۇسلاپ كېتىدۇ.
<!-- 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>
تۇراقلىق ئارقا كۆرۈنۈش
تەگلىك تۇراقلىق ھالەتكە تەڭشەلگەندە ، ئۇنىڭ سىرتىنى چەككەندە مودېل تاقالمايدۇ. تۆۋەندىكى كۇنۇپكىنى چېكىپ سىناپ بېقىڭ.
<!-- 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>
ئۇزۇن مەزمۇننى ئۆرۈش
مودېللار ئىشلەتكۈچىنىڭ كۆرۈش ئېغىزى ياكى ئۈسكۈنىسى ئۈچۈن بەك ئۇزۇن بولۇپ كەتسە ، ئۇلار بەتنىڭ ئۆزىدىن مۇستەقىل سىيرىلىدۇ. بىزنىڭ نېمە دېمەكچى بولغانلىقىمىزنى تۆۋەندىكى كۆرسەتمىنى سىناپ بېقىڭ.
.modal-dialog-scrollable
سىز قوشۇش ئارقىلىق مودېل گەۋدىسىنى سىيرىغىلى بولىدىغان ئايلانما مودېل قۇرالايسىز .modal-dialog
.
<!-- Scrollable modal -->
<div class="modal-dialog modal-dialog-scrollable">
...
</div>
تىك مەركەزلىك
.modal-dialog-centered
مودېلنى .modal-dialog
تىك مەركەزگە قوشۇڭ .
<!-- 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>
قورال قوراللىرى ۋە كۆزنەكلەر
ئېھتىياجغا ئاساسەن قورال ۋە كۆرسەتكۈچلەرنى مودېللارنىڭ ئىچىگە قويغىلى بولىدۇ. مودېللار تاقالغاندا ، ئىچىدىكى ھەر قانداق قورال قوراللىرى ۋە پوپايكىلارمۇ ئاپتوماتىك ھالدا ئىشتىن بوشىتىلىدۇ.
<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>
تورنى ئىشلىتىش
.container-fluid
Bootstrap تور سىستېمىسىنى مودېلنىڭ ئىچىدە ئۇۋا سېلىش ئارقىلىق ئىشلىتىڭ .modal-body
. ئاندىن باشقا تورغا ئوخشاش نورمال تور سىستېمىسى دەرسلىكىنى ئىشلىتىڭ.
<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>
مودېل مەزمۇنىنى ئۆزگەرتىش
ئوخشاش بولمىغان مەزمۇنلار بىلەن ئوخشاش مودېلنى قوزغىتىدىغان بىر تۈركۈم كۇنۇپكىلار بارمۇ؟ قايسى كۇنۇپكىنى باسقانلىقىغا ئاساسەن مودېلنىڭ مەزمۇنىنى ئۆزگەرتىش ئۈچۈن event.relatedTarget
HTML خاسلىقى data-bs-*
ئىشلىتىڭ .
تۆۋەندىكىسى HTML ۋە JavaScript دىن كېيىنكى جانلىق كۆرسەتمە. تېخىمۇ كۆپ ئۇچۇرغا ئېرىشىش ئۈچۈن مودېل ۋەقەلىك ھۆججەتلىرىنى ئوقۇڭ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
})
مودېللار ئارىسىدا ئالماشتۇرۇڭ
data-bs-target
خاسلىق ۋە خاسلىقلارنىڭ ئەقىللىق ئورۇنلاشتۇرۇلۇشى بىلەن كۆپ خىل مودېللار ئارا ئالماشتۇرۇڭ data-bs-toggle
. مەسىلەن ، سىز ئاللىبۇرۇن ئېچىلغان بەلگە ئىچىدىكى پارولنى ئەسلىگە كەلتۈرۈش ھالىتىنى ئالماشتۇرالايسىز. شۇنىڭغا دىققەت قىلىڭكى ، كۆپ خىل مودېلنى بىرلا ۋاقىتتا ئاچقىلى بولمايدۇ - بۇ ئۇسۇل پەقەت ئىككى ئايرىم مودېل ئارىسىدا ئالماشتۇرۇلىدۇ.
<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" data-bs-dismiss="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" data-bs-dismiss="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>
كارتوننى ئۆزگەرتىڭ
ئۆزگەرگۈچى مىقدار مودېل سۇسلىشىشتىن بۇرۇنقى $modal-fade-transform
ئۆزگىرىش ھالىتىنى بەلگىلەيدۇ ، ئۆزگىرىشچان مودېل سۇسلاشتۇرۇلغان كارتوننىڭ ئاخىرىدىكى ئۆزگىرىشنى بەلگىلەيدۇ ..modal-dialog
$modal-show-transform
.modal-dialog
ئەگەر چوڭايتىش كارتوننى مىسالغا ئالسىڭىز ، تەڭشىيەلەيسىز $modal-fade-transform: scale(.8)
.
كارتوننى ئۆچۈرۈڭ
كۆرۈنۈشتە سۇسلاشتىن كۆرە ئاددىي كۆرۈنىدىغان مودېللارغا مودېل بەلگىڭىزدىن .fade
دەرسنى ئۆچۈرۈڭ.
<div class="modal" tabindex="-1" aria-labelledby="..." aria-hidden="true">
...
</div>
ھەرىكەتچان ئېگىزلىك
ئەگەر ئوچۇق ھالەتتە مودېلنىڭ ئېگىزلىكى ئۆزگەرسە ، myModal.handleUpdate()
سىيرىلما تاياقچە كۆرۈنگەن ئەھۋالدا مودېلنىڭ ئورنىنى تەڭشەشكە تېلېفون قىلىشىڭىز كېرەك.
قولايلىق
قوشۇشقا كاپالەتلىك قىلىڭ aria-labelledby="..."
، مودېل نامىنى كۆرسىتىدۇ .modal
. aria-describedby
بۇنىڭدىن باشقا ، سىز يەنە مودېل دىئالوگىڭىزنىڭ چۈشەندۈرۈشىنى بەرسىڭىز .modal
بولىدۇ. role="dialog"
شۇنىڭغا دىققەت قىلىڭكى ، ئۇنى JavaScript ئارقىلىق قوشقان بولغاچقا قوشۇشىڭىزنىڭ ھاجىتى يوق .
YouTube فىلىملىرىنى قىستۇرۇش
YouTube فىلىملىرىنى مودېلغا قىستۇرۇش Bootstrap دا ئەمەس قوشۇمچە JavaScript تەلەپ قىلىدۇ ۋە قويۇشنى ئاپتوماتىك توختىتىدۇ. تېخىمۇ كۆپ ئۇچۇرغا ئېرىشىش ئۈچۈن بۇ پايدىلىق Stack Overflow يازمىسىنى كۆرۈڭ.
ئىختىيارى چوڭلۇق
مودېللارنىڭ ئۈچ خىل ئىختىيارى چوڭلۇقى بار ، ئۆزگەرتىش سىنىپى ئارقىلىق A غا قويغىلى بولىدۇ .modal-dialog
. بۇ رازمېرلار تار نۇقتىلاردا گورىزونتال سىيرىلما بالداقتىن ساقلىنىش ئۈچۈن بەزى بۆسۈش نۇقتىلىرىدا قوزغىلىدۇ.
چوڭلۇقى | سىنىپ | Modal max-width |
---|---|---|
كىچىك | .modal-sm |
300px |
سۈكۈتتىكى | ياق | 500px |
چوڭ | .modal-lg |
800px |
قوشۇمچە چوڭ | .modal-xl |
1140px |
ئۆزگەرتكۈچ سىنىپى بولمىغان سۈكۈتتىكى مودېلىمىز «ئوتتۇرا» چوڭلۇقتىكى مودېلنى تەشكىل قىلىدۇ.
<div class="modal-dialog modal-xl">...</div>
<div class="modal-dialog modal-lg">...</div>
<div class="modal-dialog modal-sm">...</div>
تولۇق ئېكران مودېلى
يەنە بىر قاپلاش بولسا ئىشلەتكۈچىنىڭ كۆرۈنۈشىنى ئۆز ئىچىگە ئالغان مودېلنى ئېچىش تاللانمىسى بولۇپ ، a غا قويۇلغان ئۆزگەرتىش سىنىپى ئارقىلىق ئىشلەتكىلى بولىدۇ .modal-dialog
.
سىنىپ | ئىشلەتكىلى بولىدۇ |
---|---|
.modal-fullscreen |
ھەمىشە |
.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>
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: 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);
Loop
ئىنكاسچان تولۇق ئېكرانلىق مودېللار$breakpoints
خەرىتە ۋە ئايلانما شەكىلدە ھاسىل بولىدۇ 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);
}
}
}
}
ئىشلىتىش
مودېل قىستۇرمىسى سانلىق مەلۇمات خاسلىقى ياكى JavaScript ئارقىلىق ئېھتىياجغا ئاساسەن يوشۇرۇن مەزمۇنلىرىڭىزنى ئالماشتۇرىدۇ. ئۇ يەنە سۈكۈتتىكى سىيرىلىش ھەرىكىتىنى .modal-backdrop
قاپلاپ ، مودېلنىڭ سىرتىنى چەككەندە كۆرسىتىلگەن مودېللارنى ئەمەلدىن قالدۇرۇش ئۈچۈن چېكىش رايونى بىلەن تەمىنلەيدۇ.
سانلىق مەلۇمات خاسلىقى ئارقىلىق
JavaScript يازماي تۇرۇپ مودېلنى قوزغىتىڭ. كونتروللىغۇچ data-bs-toggle="modal"
ئېلېمېنتىغا ، بىر كۇنۇپكا بىلەن تەڭ data-bs-target="#foo"
ياكى href="#foo"
مەلۇم مودېلنى ئالماشتۇرۇشقا توغرىلاڭ.
<button type="button" data-bs-toggle="modal" data-bs-target="#myModal">Launch modal</button>
JavaScript ئارقىلىق
بىر قۇر JavaScript بىلەن مودېل قۇر:
var myModal = new bootstrap.Modal(document.getElementById('myModal'), options)
تاللانما
تاللانمىلارنى سانلىق مەلۇمات خاسلىقى ياكى JavaScript ئارقىلىق يەتكۈزگىلى بولىدۇ. سانلىق مەلۇمات خاسلىقى ئۈچۈن ، تاللاش نامىغا data-bs-
ئوخشاش data-bs-backdrop=""
.
ئىسمى | تىپ | سۈكۈتتىكى | چۈشەندۈرۈش |
---|---|---|---|
backdrop |
boolean or string'static' |
true |
مودېل ئارقا كۆرۈنۈش ئېلېمېنتىنى ئۆز ئىچىگە ئالىدۇ. static ئۇنىڭدىن باشقا ، چېكىشتە مودېلنى تاقىمايدىغان ئارقا كۆرۈنۈشنى بەلگىلەڭ . |
keyboard |
boolean | true |
قېچىش كۇنۇپكىسى بېسىلغاندا مودېلنى تاقايدۇ |
focus |
boolean | true |
باشلىغاندا فوكۇسنى مودېلغا قويىدۇ. |
Methods
ماس قەدەمسىز ئۇسۇل ۋە ئۆتكۈنچى
بارلىق API ئۇسۇللىرى ماس قەدەمسىز بولۇپ ، ئۆتكۈنچى باسقۇچنى باشلايدۇ . ئۇلار بۇرۇلۇش باشلانغان ھامان ، ئۇ ئاخىرلاشماي تۇرۇپلا تېلېفون قىلغۇچىغا قايتىپ كېلىدۇ . بۇنىڭدىن باشقا ، ئۆتكۈنچى زاپچاسنى چاقىرىش ئۇسۇلىغا سەل قارىلىدۇ .
تېخىمۇ كۆپ ئۇچۇرغا ئېرىشىش ئۈچۈن JavaScript ھۆججىتىمىزنى كۆرۈڭ .
تاللاش يوللىرى
مەزمۇنلىرىڭىزنى مودېل سۈپىتىدە قوزغىتىدۇ. ئىختىيارى تاللاشلارنى قوبۇل قىلىدۇ object
.
var myModal = new bootstrap.Modal(document.getElementById('myModal'), {
keyboard: false
})
toggle
قولدا مودېل ئالماشتۇرۇلىدۇ. مودېل ئەمەلىيەتتە كۆرسىتىش ياكى يوشۇرۇشتىن بۇرۇن (يەنى ۋەقە ياكى ۋەقە يۈز بېرىشتىن بۇرۇن) دەۋەتچىگە قايتىدۇ .shown.bs.modal
hidden.bs.modal
myModal.toggle()
show
قولدا مودېل ئاچىدۇ. مودېل ئەمەلىيەتتە كۆرسىتىلىشتىن بۇرۇن (يەنى ۋەقە يۈز بېرىشتىن بۇرۇن) دەۋەتچىگە قايتىدۇ .shown.bs.modal
myModal.show()
relatedTarget
ئۇنىڭدىن باشقا ، سىز مودېل ھادىسىلىرىدە ( مۈلۈك سۈپىتىدە) قوبۇل قىلىشقا بولىدىغان تالاش-تارتىش سۈپىتىدە DOM ئېلېمېنتىنى يەتكۈزەلەيسىز .
var modalToggle = document.getElementById('toggleMyModal') // relatedTarget
myModal.show(modalToggle)
يوشۇر
قولدا مودېلنى يوشۇرىدۇ. مودېل ئەمەلىيەتتە يوشۇرۇلۇشتىن بۇرۇن (يەنى ۋەقە يۈز بېرىشتىن بۇرۇن) دەۋەتچىگە قايتىدۇ .hidden.bs.modal
myModal.hide()
handleUpdate
ئەگەر مودېلنىڭ ئېگىزلىكى ئوچۇق ھالەتتە ئۆزگەرسە (يەنى سىيرىلما تاياقچە كۆرۈنگەن ئەھۋال ئاستىدا) مودېلنىڭ ئورنىنى قولدا تەڭشەڭ.
myModal.handleUpdate()
بىر تەرەپ قىلىش
ئېلېمېنتنىڭ مودىلىنى بۇزىدۇ. (DOM ئېلېمېنتىدىكى ساقلانغان سانلىق مەلۇماتلارنى ئۆچۈرۈۋېتىدۇ)
myModal.dispose()
getInstance
تۇراقلىق ئۇسۇل ئارقىلىق DOM ئېلېمېنتى بىلەن مۇناسىۋەتلىك مودېل مىسالىغا ئېرىشەلەيسىز
var myModalEl = document.getElementById('myModal')
var modal = bootstrap.Modal.getInstance(myModalEl) // Returns a Bootstrap modal instance
getOrCreateInstance
تۇراقلىق ئۇسۇل ئارقىلىق DOM ئېلېمېنتى بىلەن مۇناسىۋەتلىك ئۈلگە مىسالغا ئېرىشەلەيسىز ياكى دەسلەپكى قەدەمدە يېڭى ئۇسۇل قۇرالايسىز.
var myModalEl = document.querySelector('#myModal')
var modal = bootstrap.Modal.getOrCreateInstance(myModalEl) // Returns a Bootstrap modal instance
Events
Bootstrap نىڭ مودېل سىنىپى مودېل ئىقتىدارغا باغلىنىش ئۈچۈن بىر قانچە ۋەقەنى ئاشكارىلىدى. بارلىق مودېل ھادىسىلىرى مودېلنىڭ ئۆزىدە (يەنى <div class="modal">
).
پائالىيەت تىپى | چۈشەندۈرۈش |
---|---|
show.bs.modal |
show مىسال ئۇسۇلى چاقىرىلغاندا بۇ ھادىسە دەرھال ئېتىلىدۇ . ئەگەر چېكىشتىن كېلىپ چىققان بولسا ، چەككەن ئېلېمېنت relatedTarget پائالىيەتنىڭ خاسلىقى سۈپىتىدە بولىدۇ. |
shown.bs.modal |
بۇ ھادىسە مودېلنى ئىشلەتكۈچىگە كۆرۈنگەندە چىقىرىۋېتىلىدۇ (CSS ئۆتكۈنچى باسقۇچنىڭ تاماملىنىشىنى ساقلايدۇ). ئەگەر چېكىشتىن كېلىپ چىققان بولسا ، چەككەن ئېلېمېنت relatedTarget پائالىيەتنىڭ خاسلىقى سۈپىتىدە بولىدۇ. |
hide.bs.modal |
hide ئۈلگە ئۇسۇلى چاقىرىلغاندا بۇ پائالىيەت دەرھال ئېتىۋېتىلىدۇ . |
hidden.bs.modal |
بۇ ھادىسە مودېل ئىشلەتكۈچىگە يوشۇرۇنغاندىن كېيىن چىقىرىلىدۇ (CSS ئۆتكۈنچى باسقۇچنىڭ تاماملىنىشىنى ساقلايدۇ). |
hidePrevented.bs.modal |
بۇ ھادىسە مودېل كۆرسىتىلگەندە ، ئۇنىڭ ئارقا كۆرۈنۈشى static ۋە مودېلنىڭ سىرتىدىكى چېكىش ياكى قېچىش كۇنۇپكىسىنى بېسىش كۇنۇپكا تاختىسىنى تاللاش ياكى data-bs-keyboard تەڭشەلگەندە ئىجرا قىلىنىدۇ false . |
var myModalEl = document.getElementById('myModal')
myModalEl.addEventListener('hidden.bs.modal', function (event) {
// do something...
})