မော်ဒယ်
မီးပုံးများ၊ အသုံးပြုသူအကြောင်းကြားချက်များ သို့မဟုတ် လုံးဝစိတ်ကြိုက်အကြောင်းအရာများအတွက် သင့်ဆိုဒ်သို့ ဒိုင်ယာလော့ခ်များထည့်ရန် Bootstrap ၏ JavaScript modal ပလပ်အင်ကို အသုံးပြုပါ။
ဘယ်လိုအလုပ်လုပ်လဲ
Bootstrap ၏ modal အစိတ်အပိုင်းကို စတင်ခြင်းမပြုမီ ကျွန်ုပ်တို့၏မီနူးရွေးချယ်မှုများသည် မကြာသေးမီက ပြောင်းလဲသွားသောကြောင့် အောက်ပါတို့ကို သေချာဖတ်ပါ။
- Modal များကို HTML၊ CSS နှင့် JavaScript တို့ဖြင့် တည်ဆောက်ထားသည်။ ၎င်းတို့သည် စာရွက်စာတမ်းရှိ အခြားအရာအားလုံးအပေါ်တွင် နေရာချထားပြီး ၎င်း
<body>
အစား မော်ဒယ်အကြောင်းအရာကို လှိမ့်ပေးရန်အတွက် လိပ်ကို ဖယ်ရှားပါ။ - modal "backdrop" ကိုနှိပ်ခြင်းဖြင့် modal ကိုအလိုအလျောက်ပိတ်လိမ့်မည်။
- Bootstrap သည် တစ်ကြိမ်လျှင် modal window တစ်ခုသာ ပံ့ပိုးပေးသည်။ အသုံးပြုသူအတွေ့အကြုံ ညံ့ဖျင်းသည်ဟု ကျွန်ုပ်တို့ယုံကြည်သောကြောင့် Nested ပုံစံများကို ပံ့ပိုးမထားပါ။
- Modals များကို
position: fixed
တစ်ခါတစ်ရံတွင် ၎င်း၏ rendering နှင့်ပတ်သက်ပြီး အနည်းငယ်ထူးခြားနိုင်ပါသည်။ ဖြစ်နိုင်သည့်အခါတိုင်း၊ အခြားဒြပ်စင်များမှ ဝင်ရောက်စွက်ဖက်ခြင်းကို ရှောင်ရှားရန် သင်၏ modal HTML ကို ထိပ်တန်းအဆင့်တွင် ထားလိုက်ပါ။.modal
အခြားပုံသေဒြပ်စင်တစ်ခုအတွင်း nesting လုပ်သောအခါတွင် သင်သည် ပြဿနာများနှင့် ရင်ဆိုင်ရဖွယ် ရှိသည်။ - တစ်ဖန်၊ အကြောင်းမှာ၊
position: fixed
မိုဘိုင်းစက်ပစ္စည်းများတွင် modals အသုံးပြုခြင်းနှင့်ပတ်သက်သောသတိပေးချက်များအချို့ရှိသည်။ အသေးစိတ်အတွက် ကျွန်ုပ်တို့၏ဘရောက်ဆာပံ့ပိုးမှုစာရွက်စာတမ်း ကို ကြည့်ပါ ။ - HTML5 သည် ၎င်း၏ semantics ကို သတ်မှတ်ပုံကြောင့်၊ HTML
autofocus
attribute သည် Bootstrap modals များတွင် အကျိုးသက်ရောက်မှု မရှိပါ။ တူညီသောအကျိုးသက်ရောက်မှုရရှိရန်၊ စိတ်ကြိုက် JavaScript အချို့ကို အသုံးပြုပါ-
var myModal = document.getElementById('myModal')
var myInput = document.getElementById('myInput')
myModal.addEventListener('shown.bs.modal', function () {
myInput.focus()
})
prefers-reduced-motion
မီဒီယာမေးမြန်းမှုအပေါ် မူတည်ပါသည်။ ကျွန်ုပ်တို့၏ဝင်ရောက်နိုင်မှုမှတ်တမ်း၏ လျှော့ချထားသောရွေ့လျားမှုအပိုင်းကို ကြည့်ပါ
။
သရုပ်ပြများနှင့် အသုံးပြုမှုလမ်းညွှန်ချက်များကို ဆက်လက်ဖတ်ရှုပါ။
ဥပမာများ
Modal အစိတ်အပိုင်းများ
အောက်တွင် static modal ဥပမာ (၎င်း၏ အဓိပ္ပါယ်မှာ ၎င်းကို position
လွှမ်းမိုး display
ထားသည်)။ ပါဝင်သည့်ပုံစံခေါင်းစီး၊ မော်ဒယ်ကိုယ်ထည် (အတွက် လိုအပ်သည် padding
) နှင့် modal footer (ချန်လှပ်ထားနိုင်သည်) တို့ဖြစ်သည်။ ဖြစ်နိုင်သည့်အခါတိုင်း ထုတ်ပယ်သည့် လုပ်ဆောင်ချက်များပါရှိသည့် မော်ဒယ်လ် ခေါင်းစီးများကို ထည့်သွင်းရန် သို့မဟုတ် အခြားသော တိကျပြတ်သားသော ဖယ်ရှားမှုလုပ်ဆောင်ချက်ကို ပေးဆောင်ရန် ကျွန်ုပ်တို့ တောင်းဆိုပါသည်။
<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>
တိုက်ရိုက်သရုပ်ပြ
အောက်ပါခလုတ်ကိုနှိပ်ခြင်းဖြင့် အလုပ်လုပ်သည့်ပုံစံနမူနာတစ်ခုကို ပြောင်းလိုက်ပါ။ ၎င်းသည် အောက်သို့လျှောကျပြီး စာမျက်နှာ၏အပေါ်ဆုံးမှ မှိန်သွားလိမ့်မည်။
<!-- 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>
Tooltips နှင့် popovers
Tooltips နှင့် popovers များကို လိုအပ်သလို modals အတွင်း ထည့်သွင်းနိုင်ပါသည်။ Modals များကို ပိတ်လိုက်သောအခါ၊ အတွင်းမှ tooltips နှင့် popovers များကိုလည်း အလိုအလျောက်ပိတ်သွားမည်ဖြစ်သည်။
<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>
ဇယားကွက်ကိုအသုံးပြုခြင်း။
Modal တစ်ခုအတွင်း Bootstrap grid စနစ်အား .container-fluid
အသုံးပြု၍ .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>
ပုံစံတူအကြောင်းအရာအမျိုးမျိုး
အနည်းငယ်ကွဲပြားသောအကြောင်းအရာများဖြင့် တူညီသောပုံစံကို အစပျိုးပေးသည့် ခလုတ်များစွာရှိပါသလား။ မည်သည့်ခလုတ်ကို နှိပ်ထားသည်ပေါ်မူတည်၍ modal ၏ အကြောင်းအရာများ ကွဲပြားစေရန် event.relatedTarget
နှင့် HTML data-bs-*
ရည်ညွှန်း ချက်များကို အသုံးပြု ပါ။
အောက်တွင် နမူနာ HTML နှင့် JavaScript တို့နောက်တွင် တိုက်ရိုက်သရုပ်ပြထားသည်။ ပိုမိုသိရှိလိုပါက၊ အသေးစိတ်အချက်အလက်များအတွက် modal events docs ကို ဖတ်ရှုပါ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
})
Modals များကြားတွင် ပြောင်းပါ။
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>
ကာတွန်းကို ပြောင်းပါ။
variable သည် modal fade-in animation မတိုင်မီ $modal-fade-transform
transform state ကို ဆုံးဖြတ်သည်၊ variable သည် modal fade-in animation ၏ အဆုံးတွင် ပြောင်းလဲမှုကို ဆုံးဖြတ်သည် ။.modal-dialog
$modal-show-transform
.modal-dialog
ဥပမာ- Zoom-in animation လိုချင်ရင် သတ်မှတ်လို့ရပါတယ် $modal-fade-transform: scale(.8)
။
လှုပ်ရှားသက်ဝင်မှုကို ဖယ်ရှားပါ။
ကြည့်ရှုရန် မှိန်သွားမည့်အစား ရိုးရိုးရှင်းရှင်း ပေါ်လာသည့် မော်ဒယ်များအတွက်၊ .fade
သင်၏ modal markup မှ အတန်းကို ဖယ်ရှားပါ။
<div class="modal" tabindex="-1" aria-labelledby="..." aria-hidden="true">
...
</div>
တက်ကြွသောအမြင့်များ
ဖွင့်ထားစဉ်တွင် modal တစ်ခု၏ အမြင့်သည် ပြောင်းလဲပါက၊ myModal.handleUpdate()
scrollbar တစ်ခုပေါ်လာပါက modal ၏ အနေအထားကို ပြန်လည်ချိန်ညှိရန် ခေါ်ဆိုသင့်ပါသည်။
သုံးစွဲနိုင်မှု
aria-labelledby="..."
modal ခေါင်းစဉ်ကို ကိုးကား၍ ထည့်သွင်းရန် သေချာပါစေ .modal
။ ထို့အပြင်၊ aria-describedby
on on ဖြင့် သင်၏ modal dialog ၏ ရှင်းလင်းချက်ကို သင် ပေးနိုင်ပါသည် .modal
။ role="dialog"
JavaScript ကတဆင့် ထည့်ပြီးသား မို့ ထည့်ဖို့ မလိုဘူးဆိုတာ သတိပြုပါ ။
YouTube ဗီဒီယိုများကို ထည့်သွင်းခြင်း။
YouTube ဗီဒီယိုများကို modals တွင် မြှုပ်နှံခြင်းသည် ဖွင့်ခြင်းနှင့် အခြားအရာများကို အလိုအလျောက်ရပ်တန့်ရန် Bootstrap တွင် မရှိသည့် နောက်ထပ် JavaScript လိုအပ်သည်။ နောက်ထပ်အချက်အလက်များအတွက် ဤအသုံးဝင်သော Stack Overflow ပို့စ်ကို ကြည့်ပါ ။
ရွေးချယ်နိုင်သော အရွယ်အစားများ
Modals များတွင် ထားရှိရန် ပြုပြင်မွမ်းမံမှု အတန်းများမှတစ်ဆင့် ရရှိနိုင်သော ရွေးချယ်နိုင်သော အရွယ်အစား သုံးခုရှိသည် .modal-dialog
။ ကျဉ်းမြောင်းသော မြင်ကွင်းများပေါ်ရှိ အလျားလိုက် scrollbar များကို ရှောင်ရှားရန် ဤအရွယ်အစားများသည် အချို့သော breakpoints များတွင် စတင်ဝင်ရောက်ပါသည်။
အရွယ်အစား | အတန်း | Modal max-width |
---|---|---|
သေးငယ်သည်။ | .modal-sm |
300px |
ပုံသေ | တစ်ခုမှ | 500px |
ကြီးမားသည်။ | .modal-lg |
800px |
ပိုကြီးတယ်။ | .modal-xl |
1140px |
ပြုပြင်မွမ်းမံမှုအတန်းအစားမပါဘဲ ကျွန်ုပ်တို့၏မူလပုံစံ modal သည် "အလတ်စား" အရွယ်အစား modal ဖြစ်သည်။
<div class="modal-dialog modal-xl">...</div>
<div class="modal-dialog modal-lg">...</div>
<div class="modal-dialog modal-sm">...</div>
မျက်နှာပြင်အပြည့်ပုံစံ
အခြား override သည် user viewport ကို ဖုံးအုပ်ထားသည့် modal တစ်ခုကို ပေါ်လာရန် ရွေးချယ်မှုဖြစ်ပြီး၊ ပေါ်တွင် နေရာချထားသည့် modifier အတန်းများမှတစ်ဆင့် ရရှိနိုင်သော ရွေးချယ်မှု .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>
ဆူး
ကိန်းရှင်များ
$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);
ဒကာ
တုံ့ပြန်မှုရှိသော မျက်နှာပြင် အပြည့်ပုံစံများကို မြေပုံ မှတစ်ဆင့် ထုတ်ပေးပြီး $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);
}
}
}
}
အသုံးပြုမှု
modal plugin သည် ဒေတာ attributes သို့မဟုတ် JavaScript မှတဆင့် တောင်းဆိုမှုအရ သင့်ဝှက်ထားသော အကြောင်းအရာကို ပြောင်းပေးသည်။ ၎င်းသည် ပုံသေ လှိမ့်ခြင်း အပြုအမူကို လွှမ်းမိုးစေပြီး .modal-backdrop
ပြထားသည့် မော်ဒယ်များကို ဖယ်ရှားရန်အတွက် ကလစ်ဧရိယာကို ပံ့ပိုးပေးသည့် ပုံစံကို ထုတ်ပေးသည်။
ဒေတာဂုဏ်တော်များမှတဆင့်
JavaScript မရေးဘဲ modal ကို အသက်သွင်းပါ။ 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 တစ်ကြောင်းတည်းဖြင့် modal တစ်ခုကို ဖန်တီးပါ-
var myModal = new bootstrap.Modal(document.getElementById('myModal'), options)
ရွေးချယ်စရာများ
ရွေးချယ်မှုများကို data attribute သို့မဟုတ် JavaScript မှတဆင့်ဖြတ်သန်းနိုင်သည်။ data-bs-
ဒေတာရည်ညွှန်းချက်များအတွက် ၊ တွင်ပါရှိသည့်အတိုင်း ရွေးချယ်စရာအမည်ကို ပေါင်းထည့် ပါ data-bs-backdrop=""
။
နာမည် | ရိုက်ပါ။ | ပုံသေ | ဖော်ပြချက် |
---|---|---|---|
backdrop |
boolean သို့မဟုတ် string'static' |
true |
ပုံစံ-နောက်ခံဒြပ်စင်တစ်ခု ပါဝင်သည်။ တနည်းအားဖြင့် static ကလစ်ပေါ်တွင် modal ကို မပိတ်နိုင်သော နောက်ခံကားအတွက် သတ်မှတ်ပါ။ |
keyboard |
ဘူလီယံ | true |
Escape သော့ကို နှိပ်လိုက်သောအခါ modal ကို ပိတ်ပါ။ |
focus |
ဘူလီယံ | true |
စတင်သောအခါတွင် modal ကိုအာရုံစိုက်သည်။ |
နည်းလမ်းများ
Asynchronous နည်းလမ်းများနှင့် အသွင်ကူးပြောင်းမှုများ
API နည်းလမ်းအားလုံးသည် အ ညီအမျှ ဖြစ်ပြီး အကူးအပြောင်း တစ်ခု စတင်သည် ။ အကူးအပြောင်းစတင်သည်နှင့် မပြီးဆုံးမီတွင် ၎င်းတို့သည် ခေါ်ဆိုသူထံသို့ ပြန်သွားကြသည် ။ ထို့အပြင်၊ transitioning component တစ်ခုပေါ်ရှိ method ခေါ်ဆိုမှုကို လျစ်လျူရှု ပါမည်။
နောက်ထပ်အချက်အလက်များအတွက် ကျွန်ုပ်တို့၏ JavaScript စာရွက်စာတမ်းကို ကြည့်ပါ ။
ရွေးချယ်ခွင့်များ
သင့်အကြောင်းအရာကို ပုံစံတူအဖြစ် အသက်သွင်းပါ။ စိတ်ကြိုက်ရွေးချယ်စရာများကို လက်ခံသည် object
။
var myModal = new bootstrap.Modal(document.getElementById('myModal'), {
keyboard: false
})
ပြောင်းရန်
ပုံစံတစ်ခုကို ကိုယ်တိုင်ပြောင်းသည်။ modal ကို အမှန်တကယ် ပြသခြင်း သို့မဟုတ် ဝှက်ထားခြင်း မပြုမီ ခေါ်ဆိုသူထံ ပြန်လည်ပေးပို့ခြင်း (ဥပမာ shown.bs.modal
သို့မဟုတ် hidden.bs.modal
ဖြစ်ရပ်မဖြစ်ပေါ်မီ)။
myModal.toggle()
ရှိုး
မော်ဒယ်တစ်ခုကို ကိုယ်တိုင်ဖွင့်ပါ။ modal ကို အမှန်တကယ် မပြသမီ ခေါ်ဆိုသူထံ ပြန်လည်ရောက်ရှိသည် (ဆိုလိုသည်မှာ shown.bs.modal
ပွဲမဖြစ်ပွားမီ)။
myModal.show()
relatedTarget
ထို့အပြင်၊ သင်သည် modal ဖြစ်ရပ်များ ( ပိုင်ဆိုင်မှု အဖြစ်) တွင်လက်ခံနိုင်သောအငြင်းအခုံတစ်ခုအနေဖြင့် DOM ဒြပ်စင်ကိုဖြတ်သန်းနိုင်သည် ။
var modalToggle = document.getElementById('toggleMyModal') // relatedTarget
myModal.show(modalToggle)
ပုန်း
ပုံစံတစ်ခုကို ကိုယ်တိုင် ဝှက်ထားသည်။ modal သည် အမှန်တကယ် ဝှက်ထားခြင်းမရှိမီ ခေါ်ဆိုသူထံသို့ ပြန်လည်ရောက်ရှိသည် (ဆိုလိုသည်မှာ hidden.bs.modal
ပွဲမဖြစ်ပွားမီ)။
myModal.hide()
ကိုင်တွယ်အပ်ဒိတ်
ဖွင့်ထားစဉ်တွင် modal ၏ အမြင့်သည် ပြောင်းလဲပါက modal ၏ အနေအထားကို ကိုယ်တိုင်ပြန်ပြင်ပါ (ဆိုလိုသည်မှာ scrollbar တစ်ခုပေါ်လာပါက)။
myModal.handleUpdate()
စွန့်ပစ်ပါ။
ဒြပ်စင်တစ်ခု၏ပုံစံကို ဖျက်ဆီးသည်။ (DOM ဒြပ်စင်ပေါ်ရှိ သိမ်းဆည်းထားသည့် ဒေတာကို ဖယ်ရှားသည်)
myModal.dispose()
getInstance
DOM ဒြပ်စင်တစ်ခုနှင့်ဆက်စပ်နေသော modal instance ကိုရရှိရန်ခွင့်ပြုသည့် Static method
var myModalEl = document.getElementById('myModal')
var modal = bootstrap.Modal.getInstance(myModalEl) // Returns a Bootstrap modal instance
getOrCreateInstance
DOM ဒြပ်စင်နှင့် ဆက်စပ်နေသော modal instance ကို ရယူရန် ခွင့်ပြုသည့် Static method သည် ၎င်းကို ကနဦး မလုပ်ဆောင်ပါက၊
var myModalEl = document.querySelector('#myModal')
var modal = bootstrap.Modal.getOrCreateInstance(myModalEl) // Returns a Bootstrap modal instance
အဲ့ဒါနဲ့
Bootstrap ၏ modal class သည် modal လုပ်ဆောင်နိုင်စွမ်းသို့ ချိတ်ဆက်ရန်အတွက် ဖြစ်ရပ်အချို့ကို ဖော်ထုတ်ပေးပါသည်။ modal အဖြစ်အပျက်အားလုံးကို modal ကိုယ်တိုင် (ဆိုလိုသည်မှာ <div class="modal">
) တွင် ပစ်ခတ်သည်။
ပွဲအမျိုးအစား | ဖော်ပြချက် |
---|---|
show.bs.modal |
show သာဓကနည်းလမ်းကို ခေါ်သော အခါတွင် ဤဖြစ်ရပ်သည် ချက်ချင်း မီးလောင် ပါသည်။ ကလစ်တစ်ခုကြောင့် ဖြစ်ပါက၊ နှိပ်လိုက်သော အစိတ်အပိုင်းကို relatedTarget ပွဲ၏ ပိုင်ဆိုင်မှုအဖြစ် ရရှိနိုင်သည်။ |
shown.bs.modal |
မော်ဒယ်ကို အသုံးပြုသူမြင်အောင်ပြုလုပ်ပြီးသောအခါ (CSS အသွင်ကူးပြောင်းမှုများကို အပြီးသတ်ရန် စောင့်ပါမည်)။ ကလစ်တစ်ခုကြောင့် ဖြစ်ပါက၊ နှိပ်လိုက်သော အစိတ်အပိုင်းကို relatedTarget ပွဲ၏ ပိုင်ဆိုင်မှုအဖြစ် ရရှိနိုင်သည်။ |
hide.bs.modal |
hide သာဓကနည်းလမ်းကို ခေါ်သော အခါတွင် ဤဖြစ်ရပ်ကို ချက်ခြင်း အလုပ်ဖြုတ်သည် ။ |
hidden.bs.modal |
အသုံးပြုသူထံမှ modal ကို ဝှက်ပြီးသွားသောအခါတွင် ဤဖြစ်ရပ်ကို အလုပ်ဖြုတ်သည် (CSS အသွင်ကူးပြောင်းမှုများကို အပြီးသတ်ရန် စောင့်ပါမည်)။ |
hidePrevented.bs.modal |
modal ကိုပြသသောအခါတွင် ဤဖြစ်ရပ်ကို အလုပ်ဖြုတ်လိုက်သည်၊ ၎င်း၏ နောက်ခံကားသည် static နှင့် modal အပြင်ဘက်တွင် ကလစ်နှိပ်ခြင်း သို့မဟုတ် ကီးဘုတ်ရွေးချယ်မှုဖြင့် လုပ်ဆောင်သည် သို့မဟုတ် data-bs-keyboard သတ်မှတ်ထားသော ခလုတ်တစ်ခုဖြင့် လုပ်ဆောင် false ပါသည်။ |
var myModalEl = document.getElementById('myModal')
myModalEl.addEventListener('hidden.bs.modal', function (event) {
// do something...
})