Bootstrap Modal Plugin
Modal Plugin
Modal ပလပ်အင်သည် လက်ရှိစာမျက်နှာ၏ထိပ်တွင် ပြသထားသည့် dialog box/popup window တစ်ခုဖြစ်သည်။
အကြံပြုချက်- ပလပ်အင်များကို တစ်ဦးချင်းစီ (Bootstrap ၏ တစ်ဦးချင်း "modal.js" ဖိုင်ကို အသုံးပြု၍) သို့မဟုတ် အားလုံး တစ်ပြိုင်နက် ("bootstrap.js" သို့မဟုတ် "bootstrap.min.js" ကို အသုံးပြု၍)။
Modal တစ်ခုကို ဘယ်လိုဖန်တီးမလဲ။
အောက်ဖော်ပြပါ ဥပမာသည် အခြေခံပုံစံတစ်ခုကို ဖန်တီးနည်းကို ပြသသည်-
ဥပမာ
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
နမူနာရှင်းပြထားပါတယ်။
"အစပျိုးခြင်း" အပိုင်း-
modal window ကိုစတင်ရန်၊ ခလုတ်တစ်ခု သို့မဟုတ် လင့်ခ်တစ်ခုကို အသုံးပြုရန်လိုအပ်သည်။
ထို့နောက် data-* attribute နှစ်ခုကို ထည့်သွင်းပါ-
data-toggle="modal"modal window ကိုဖွင့်ပါ။data-target="#myModal"modal ၏ ID ကိုညွှန်ပြသည်။
"Modal" အပိုင်း-
modal ၏ မိခင် <div>တွင် modal ("myModal") ကို အစပျိုးရန် အသုံးပြုသည့် data-target attribute ၏တန်ဖိုးနှင့် တူညီသော ID တစ်ခုရှိရပါမည်။
.modalအတန်းသည် အကြောင်းအရာကို modal <div>တစ်ခုအဖြစ် သတ်မှတ်ပြီး ၎င်းကို အာရုံစိုက်စေသည်။
.fadeအတန်းသည် modal အဝင်နှင့်အထွက်ကို မှိန်သွားစေသည့် အကူးအပြောင်းအကျိုးသက်ရောက်မှုကို ပေါင်းထည့်သည် ။ ဤအကျိုးသက်ရောက်မှုကို မလိုလားပါက ဤအတန်းကို ဖယ်ရှားပါ။
ရည်ညွှန်းချက် role="dialog"သည် ဖန်သားပြင်ဖတ်စက်များကို အသုံးပြုနေသူများအတွက် အသုံးပြုနိုင်စွမ်းကို ပိုမိုကောင်းမွန်စေသည်။
အတန်းသည် modal ၏ .modal-dialogသင့်လျော်သော width နှင့် margin ကို သတ်မှတ်သည်။
"Modal အကြောင်းအရာ" အပိုင်း-
" " <div>ဖြင့် class="modal-contentmodal (ဘောင်၊ နောက်ခံအရောင် စသည်ဖြင့်) စတိုင်လ်ပေးပါသည်။ ၎င်းအတွင်းတွင် <div>modal ၏ ခေါင်းစီး၊ ကိုယ်ထည်၊ နှင့် footer ကိုထည့်ပါ။
modal ၏ .modal-headerခေါင်းစီးအတွက် style ကို သတ်မှတ်ရန် class ကို အသုံးပြုသည်။ ခေါင်း <button>စီးအတွင်းတွင် data-dismiss="modal"၎င်းကိုနှိပ်ပါက modal ကိုပိတ်မည့် attribute တစ်ခုရှိသည်။ အတန်းသည် အ .closeပိတ်ခလုတ်ကို ပုံစံသတ်မှတ်ပြီး .modal-titleအတန်းသည် ခေါင်းစီးအား သင့်လျော်သောမျဉ်းအမြင့်ဖြင့် ပုံစံပေးသည်။
modal ၏ .modal-bodyကိုယ်ထည်အတွက် style ကိုသတ်မှတ်ရန် class ကိုအသုံးပြုသည်။ HTML markup ကို ဤနေရာတွင် ထည့်ပါ။ စာပိုဒ်များ၊ ရုပ်ပုံများ၊ ဗီဒီယိုများ စသည်တို့
အတန်းကို modal ၏ .modal-footerအောက်ခြေတွင် စတိုင်ကို သတ်မှတ်ရန် အသုံးပြုသည်။ ဤဧရိယာသည် မူရင်းအတိုင်း မှန်ကန်စွာ ညှိထားကြောင်း သတိပြုပါ။
Modal အရွယ်အစား
.modal-sm
သေးငယ်သော modals သို့မဟုတ် .modal-lgကြီးမားသော modals အတွက် အတန်းကို ပေါင်းထည့်ခြင်းဖြင့် modal ၏ အရွယ်အစားကို ပြောင်းလဲ ပါ။
<div>အတန်းဖြင့် အရွယ်အစား အတန်းကို ဒြပ်စင် သို့ ပေါင်းထည့်ပါ .modal-dialog။
Modal အသေး
<div class="modal-dialog modal-sm">
အကြီးစား Modal
<div class="modal-dialog modal-lg">
ပုံမှန်အားဖြင့်၊ မော်ဒယ်များသည် အရွယ်အစား အလယ်အလတ်ဖြစ်သည်။
Bootstrap Modal ရည်ညွှန်းချက်ကို အပြီးသတ်ပါ။
modal ရွေးချယ်မှုများ၊ နည်းလမ်းများနှင့် ဖြစ်ရပ်များအားလုံးကို ကိုးကားရန်အတွက်၊ ကျွန်ုပ်တို့၏ Bootstrap JS Modal Reference သို့ သွားပါ ။