မော်ဒယ်
မီးပုံးများ၊ အသုံးပြုသူအကြောင်းကြားချက်များ သို့မဟုတ် လုံးဝစိတ်ကြိုက်အကြောင်းအရာများအတွက် သင့်ဆိုဒ်သို့ ဒိုင်ယာလော့ခ်များထည့်ရန် 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 အချို့ကို အသုံးပြုပါ-
$('#myModal').on('shown.bs.modal', function () {
$('#myInput').trigger('focus')
})
prefers-reduced-motion
မီဒီယာမေးမြန်းမှုအပေါ် မူတည်ပါသည်။ ကျွန်ုပ်တို့၏ဝင်ရောက်နိုင်မှုမှတ်တမ်း၏ လျှော့ချထားသောရွေ့လျားမှုအပိုင်းကို ကြည့်ပါ
။
သရုပ်ပြများနှင့် အသုံးပြုမှုလမ်းညွှန်ချက်များကို ဆက်လက်ဖတ်ရှုပါ။
ဥပမာများ
Modal အစိတ်အပိုင်းများ
အောက်တွင် static modal ဥပမာတစ်ခုဖြစ်သည် (၎င်း၏ အဓိပ္ပါယ်မှာ ၎င်းကို 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="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</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-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-toggle="modal" data-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="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-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-toggle="modal" data-target="#staticBackdrop">
Launch static backdrop modal
</button>
<!-- Modal -->
<div class="modal fade" id="staticBackdrop" data-backdrop="static" data-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="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-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-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 ml-auto">.col-md-4 .ml-auto</div>
</div>
<div class="row">
<div class="col-md-3 ml-auto">.col-md-3 .ml-auto</div>
<div class="col-md-2 ml-auto">.col-md-2 .ml-auto</div>
</div>
<div class="row">
<div class="col-md-6 ml-auto">.col-md-6 .ml-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-*
attribute (ဖြစ်နိုင်သည် jQuery မှတဆင့် ) ကို အသုံးပြု ပါ။
အောက်တွင် နမူနာ HTML နှင့် JavaScript တို့နောက်တွင် တိုက်ရိုက်သရုပ်ပြထားသည်။ ပိုမိုသိရှိလိုပါက၊ အသေးစိတ်အချက်အလက်များအတွက် modal events docs ကို ဖတ်ရှုပါrelatedTarget
။
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">Open modal for @mdo</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@fat">Open modal for @fat</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-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="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="recipient-name" class="col-form-label">Recipient:</label>
<input type="text" class="form-control" id="recipient-name">
</div>
<div class="form-group">
<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-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Send message</button>
</div>
</div>
</div>
</div>
$('#exampleModal').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget) // Button that triggered the modal
var recipient = button.data('whatever') // Extract info from data-* attributes
// If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
// Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
var modal = $(this)
modal.find('.modal-title').text('New message to ' + recipient)
modal.find('.modal-body input').val(recipient)
})
ကာတွန်းကို ပြောင်းပါ။
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').modal('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>
အသုံးပြုမှု
modal plugin သည် ဒေတာ attributes သို့မဟုတ် JavaScript မှတဆင့် တောင်းဆိုမှုအရ သင့်ဝှက်ထားသော အကြောင်းအရာကို ပြောင်းပေးသည်။ ၎င်းသည် ပုံသေ scrolling အပြုအမူကို အစားထိုးရန်အတွက်လည်း ထည့်သွင်းပြီး .modal-open
modal အပြင်ဘက်တွင် နှိပ်သည့်အခါ ပြထားသည့် modals <body>
ကိုပယ်ဖျက်ရန် အတွက် ကလစ်ဧရိယာကို ပံ့ပိုးပေးပါသည်။.modal-backdrop
ဒေတာဂုဏ်တော်များမှတဆင့်
JavaScript မရေးဘဲ modal ကို အသက်သွင်းပါ။ data-toggle="modal"
ခလုတ်တစ်ခုနှင့်အတူ၊ data-target="#foo"
သို့မဟုတ် href="#foo"
ပြောင်းရန် သီးခြားပုံစံတစ်ခုအား ပစ်မှတ်ထားရန် ခလုတ်တစ်ခုကဲ့သို့ ထိန်းချုပ်ကိရိယာဒြပ်စင်ပေါ်တွင် သတ်မှတ် ပါ။
<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>
JavaScript မှတဆင့်
myModal
JavaScript တစ်ကြောင်းတည်း ဖြင့် ID ဖြင့် modal ကိုခေါ်ဆိုပါ -
$('#myModal').modal(options)
ရွေးချယ်မှုများ
ရွေးချယ်စရာများကို data attributes သို့မဟုတ် JavaScript မှတဆင့်ဖြတ်သန်းနိုင်သည်။ data-
ဒေတာရည်ညွှန်းချက်များအတွက် ၊ တွင်ပါရှိသည့်အတိုင်း ရွေးချယ်စရာအမည်ကို ပေါင်းထည့် ပါ data-backdrop=""
။
နာမည် | ရိုက်ပါ။ | ပုံသေ | ဖော်ပြချက် |
---|---|---|---|
နောက်ခံကား | boolean သို့မဟုတ် string'static' |
မှန်ပါတယ်။ | ပုံစံ-နောက်ခံဒြပ်စင်တစ်ခု ပါဝင်သည်။ တနည်းအားဖြင့် static ကလစ်ပေါ်တွင် modal ကို မပိတ်သော နောက်ခံကားအတွက် သတ်မှတ်ပါ။ |
ကီးဘုတ် | ဘူလီယံ | မှန်ပါတယ်။ | Escape သော့ကို နှိပ်လိုက်သောအခါ modal ကို ပိတ်ပါ။ |
အာရုံစိုက် | ဘူလီယံ | မှန်ပါတယ်။ | စတင်သောအခါတွင် modal ကိုအာရုံစိုက်သည်။ |
ရှိုး | ဘူလီယံ | မှန်ပါတယ်။ | စတင်သောအခါတွင် modal ကိုပြသသည်။ |
နည်းလမ်းများ
Asynchronous နည်းလမ်းများနှင့် အသွင်ကူးပြောင်းမှုများ
API နည်းလမ်းအားလုံးသည် အ ညီအမျှ ဖြစ်ပြီး အသွင်ကူးပြောင်းမှု ကို စတင်သည် ။ အကူးအပြောင်းစတင်သည်နှင့် မပြီးဆုံးမီတွင် ၎င်းတို့သည် ခေါ်ဆိုသူထံသို့ ပြန်သွားကြသည် ။ ထို့အပြင်၊ transitioning component တစ်ခုပေါ်ရှိ method ခေါ်ဆိုမှုကို လျစ်လျူရှု ပါမည်။
နောက်ထပ်အချက်အလက်များအတွက် ကျွန်ုပ်တို့၏ JavaScript စာရွက်စာတမ်းကို ကြည့်ပါ ။
.modal(options)
သင့်အကြောင်းအရာကို ပုံစံတူအဖြစ် အသက်သွင်းပါ။ စိတ်ကြိုက်ရွေးချယ်စရာများကို လက်ခံသည် object
။
$('#myModal').modal({
keyboard: false
})
.modal('toggle')
ပုံစံတစ်ခုကို ကိုယ်တိုင်ပြောင်းသည်။ modal ကို အမှန်တကယ် ပြသခြင်း သို့မဟုတ် ဝှက်ထားခြင်း မပြုမီ ခေါ်ဆိုသူထံ ပြန်လည်ပေးပို့ခြင်း (ဥပမာ shown.bs.modal
သို့မဟုတ် hidden.bs.modal
ဖြစ်ရပ်မဖြစ်ပေါ်မီ)။
$('#myModal').modal('toggle')
.modal('show')
မော်ဒယ်တစ်ခုကို ကိုယ်တိုင်ဖွင့်ပါ။ modal ကို အမှန်တကယ် မပြသမီ ခေါ်ဆိုသူထံ ပြန်လည်ရောက်ရှိသည် (ဆိုလိုသည်မှာ shown.bs.modal
ပွဲမဖြစ်ပွားမီ)။
$('#myModal').modal('show')
.modal('hide')
ပုံစံတစ်ခုကို ကိုယ်တိုင် ဝှက်ထားသည်။ modal သည် အမှန်တကယ် ဝှက်ထားခြင်းမရှိမီ ခေါ်ဆိုသူထံသို့ ပြန်လည်ရောက်ရှိသည် (ဆိုလိုသည်မှာ hidden.bs.modal
ပွဲမဖြစ်ပွားမီ)။
$('#myModal').modal('hide')
.modal('handleUpdate')
ဖွင့်ထားစဉ်တွင် modal ၏ အမြင့်သည် ပြောင်းလဲပါက modal ၏ အနေအထားကို ကိုယ်တိုင်ပြန်ပြင်ပါ (ဆိုလိုသည်မှာ scrollbar တစ်ခုပေါ်လာပါက)။
$('#myModal').modal('handleUpdate')
.modal('dispose')
ဒြပ်စင်တစ်ခု၏ပုံစံကို ဖျက်ဆီးသည်။
အဲ့ဒါနဲ့
Bootstrap ၏ modal class သည် modal လုပ်ဆောင်နိုင်စွမ်းသို့ ချိတ်ဆက်ရန်အတွက် ဖြစ်ရပ်အချို့ကို ဖော်ထုတ်ပေးပါသည်။ modal အဖြစ်အပျက်အားလုံးကို modal ကိုယ်တိုင် (ဆိုလိုသည်မှာ <div class="modal">
) တွင် ပစ်ခတ်သည်။
ပွဲအမျိုးအစား | ဖော်ပြချက် |
---|---|
show.bs.modal | show သာဓကနည်းလမ်းကို ခေါ်သော အခါတွင် ဤဖြစ်ရပ်သည် ချက်ချင်း မီးလောင် ပါသည်။ ကလစ်တစ်ခုကြောင့် ဖြစ်ပါက၊ နှိပ်လိုက်သော အစိတ်အပိုင်းကို relatedTarget ပွဲ၏ ပိုင်ဆိုင်မှုအဖြစ် ရရှိနိုင်သည်။ |
show.bs.modal | မော်ဒယ်ကို အသုံးပြုသူမြင်အောင်ပြုလုပ်ပြီးသောအခါ (CSS အသွင်ကူးပြောင်းမှုများကို အပြီးသတ်ရန် စောင့်ပါမည်)။ ကလစ်တစ်ခုကြောင့် ဖြစ်ပါက၊ နှိပ်လိုက်သော အစိတ်အပိုင်းကို relatedTarget ပွဲ၏ ပိုင်ဆိုင်မှုအဖြစ် ရရှိနိုင်သည်။ |
hide.bs.modal | hide သာဓကနည်းလမ်းကို ခေါ်သော အခါတွင် ဤဖြစ်ရပ်ကို ချက်ခြင်း အလုပ်ဖြုတ်သည် ။ |
hidden.bs.modal | အသုံးပြုသူထံမှ modal ကို ဝှက်ပြီးသွားသောအခါတွင် ဤဖြစ်ရပ်ကို အလုပ်ဖြုတ်သည် (CSS အသွင်ကူးပြောင်းမှုများကို အပြီးသတ်ရန် စောင့်ပါမည်)။ |
hidePrevented.bs.modal | modal ကိုပြသသောအခါတွင် ဤဖြစ်ရပ်ကို အလုပ်ဖြုတ်လိုက်သည်၊ ၎င်း၏ နောက်ခံကားသည် static နှင့် modal အပြင်ဘက်တွင် ကလစ်နှိပ်ခြင်း သို့မဟုတ် ကီးဘုတ်ရွေးချယ်မှုဖြင့် လုပ်ဆောင်သည် သို့မဟုတ် data-keyboard သတ်မှတ်ထားသော ခလုတ်တစ်ခုဖြင့် လုပ်ဆောင် false ပါသည်။ |
$('#myModal').on('hidden.bs.modal', function (event) {
// do something...
})