Bootstrap 4 Modal
Bootstrap 4 Modal
Modal အစိတ်အပိုင်းသည် လက်ရှိစာမျက်နှာ၏ထိပ်တွင်ပြသထားသည့် dialog box/popup window တစ်ခုဖြစ်သည်-
Modal တစ်ခုကို ဘယ်လိုဖန်တီးမလဲ။
အောက်ဖော်ပြပါ ဥပမာသည် အခြေခံပုံစံတစ်ခုကို ဖန်တီးနည်းကို ပြသသည်-
ဥပမာ
<!-- Button to Open the Modal -->
<button type="button" class="btn btn-primary"
data-toggle="modal" data-target="#myModal">
Open modal
</button>
<!-- The Modal -->
<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal
Header -->
<div class="modal-header">
<h4 class="modal-title">Modal Heading</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
Modal
body..
</div>
<!-- Modal footer -->
<div
class="modal-footer">
<button
type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
ကာတွန်းထည့်ပါ။
.fademodal အဖွင့်အပိတ်လုပ်သည့်အခါ မှိန်ဖျော့သောအကျိုးသက်ရောက်မှုကိုထည့်ရန် အတန်းကို သုံး ပါ-
ဥပမာ
<!-- Fading modal -->
<div class="modal fade"></div>
<!--
Modal without animation -->
<div class="modal"></div>
Modal အရွယ်အစား
သေးငယ်သော မော်ဒယ်များအတွက် အတန်းအစား၊ မော်ဒယ် ကြီးများအတွက် အတန်း သို့မဟုတ် အပိုကြီးမားသော မော်ဒယ်များ .modal-sm
အတွက် အတန်းကို ပေါင်းထည့်ခြင်းဖြင့် modal ၏ အရွယ်အစားကို ပြောင်းလဲ ပါ။.modal-lg.modal-xl
<div>အတန်းဖြင့် အရွယ်အစား အတန်းကို ဒြပ်စင် သို့ ပေါင်းထည့်ပါ .modal-dialog။
Modal အသေး
<div class="modal-dialog modal-sm">
အကြီးစား Modal
<div class="modal-dialog modal-lg">
Extra Large Modal
<div class="modal-dialog modal-xl">
ပုံမှန်အားဖြင့်၊ modals များသည် "အလယ်အလတ်" အရွယ်အစားဖြစ်သည်။
ဗဟိုပြု Modal
.modal-dialog-centered
အတန်းအစား အတန်း ဖြင့် စာမျက်နှာအတွင်း ဒေါင်လိုက်နှင့် အလျားလိုက် မော်ဒယ်ကို အလယ်ဗဟိုထားပါ ။
ဥပမာ
<div class="modal-dialog modal-dialog-centered">
Scrolling Modal
သင့်တွင် modal တွင် အကြောင်းအရာများစွာရှိသောအခါ၊ စာမျက်နှာသို့ scrollbar တစ်ခုထပ်ထည့်သည်။ နားလည်ရန် အောက်ပါ ဥပမာများကို ကြည့်ပါ။
ဥပမာ
<div class="modal-dialog">
သို့သော်၊ ၎င်းကို စာမျက်နှာကိုယ်တိုင်ထည့်ခြင်းအစား modal အတွင်းသို့သာ scroll .modal-dialog-scrollableလုပ်နိုင်သည် .modal-dialog။
ဥပမာ
<div class="modal-dialog modal-dialog-scrollable">
Bootstrap Modal ရည်ညွှန်းချက်ကို အပြီးသတ်ပါ။
modal ရွေးချယ်မှုများ၊ နည်းလမ်းများနှင့် ဖြစ်ရပ်များအားလုံးကို ကိုးကားရန်အတွက်၊ ကျွန်ုပ်တို့၏ Bootstrap JS Modal Reference သို့ သွားပါ ။