Bootstrap JS Modal
JS Modal (modal.js)
Modal ပလပ်အင်သည် လက်ရှိစာမျက်နှာ၏ထိပ်တွင် ပြသထားသည့် ဒိုင်ယာလော့ဘောက်စ်/ပေါ့ပ်အပ်ဝင်းဒိုးတစ်ခုဖြစ်သည်။
Modals အကြောင်း သင်ခန်းစာအတွက်၊ ကျွန်ုပ်တို့၏ Bootstrap Modal Tutorial ကို ဖတ်ရှုပါ ။
Modal Plugin အတန်းများ
Class | Description |
---|---|
.modal | Creates a modal |
.modal-content | Styles the modal properly with border, background-color, etc. Use this class to add the modal's header, body, and footer. |
.modal-header | Defines the style for the header of the modal |
.modal-body | Defines the style for the body of the modal |
.modal-footer | Defines the style for the footer in the modal. Note: This area is right-aligned by default. To change this, overwrite CSS with text-align:left|center |
.modal-sm | Specifies a small modal |
.modal-lg | Specifies a large modal |
.fade | Adds an animation/transition effect which fades the modal in and out |
Modal ကို data-* Attributes မှတဆင့် အစပျိုးပါ။
မည်သည့်ဒြပ်စင်သို့ data-toggle="modal"
ပေါင်း ထည့်ပါ ။data-target="#modalID"
မှတ်ချက်- ဒြပ်စင် များအတွက် <a>
၊ ချန်လှပ် data-target
ပြီး ၎င်း
href="#modalID"
အစား အသုံးပြုပါ-
ဥပမာ
<!-- Buttons -->
<button type="button" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Links -->
<a data-toggle="modal" href="#myModal">Open Modal</a>
<!-- Other elements -->
<p data-toggle="modal" data-target="#myModal">Open Modal</p>
JavaScript မှတဆင့် အစပျိုးပါ။
ကိုယ်တိုင်ဖွင့်ပါ-
ဥပမာ
$("#myModal").modal()
Modal ရွေးချယ်မှုများ
ရွေးချယ်စရာများကို data attribute သို့မဟုတ် JavaScript မှတဆင့်ဖြတ်သန်းနိုင်သည်။ ဒေတာရည်ညွှန်းချက်များအတွက်၊ data-backdrop="" တွင်ကဲ့သို့ ရွေးချယ်စရာအမည်ကို data- တွင် ပေါင်းထည့်ပါ။
Name | Type | Default | Description | Try it |
---|---|---|---|---|
backdrop | boolean or the string "static" | true |
Specifies whether the modal should have a dark overlay:
If you specify the value "static", it is not possible to close the modal when clicking outside of it |
|
keyboard | boolean | true | Specifies whether the modal can be closed with the escape key (Esc):
|
|
show | boolean | true | Specifies whether to show the modal when initialized |
Modal နည်းလမ်းများ
အောက်ဖော်ပြပါဇယားတွင် ရနိုင်သောပုံစံနည်းလမ်းများအားလုံးကို စာရင်းပြုစုထားသည်။
Method | Description | Try it |
---|---|---|
.modal(options) | Activates the content as a modal. See options above for valid values | |
.modal("toggle") | Toggles the modal | |
.modal("show") | Opens the modal | |
.modal("hide") | Hides the modal |
Modal ပွဲများ
အောက်ဖော်ပြပါဇယားတွင် ရရှိနိုင်သော ပုံစံတူဖြစ်ရပ်များအားလုံးကို စာရင်းပြုစုထားသည်။
Event | Description | Try it |
---|---|---|
show.bs.modal | Occurs when the modal is about to be shown | |
shown.bs.modal | Occurs when the modal is fully shown (after CSS transitions have completed) | |
hide.bs.modal | Occurs when the modal is about to be hidden | |
hidden.bs.modal | Occurs when the modal is fully hidden (after CSS transitions have completed) |
နောက်ထပ် ဥပမာများ
Login Modal
အောက်ပါဥပမာသည် လော့ဂ်အင်အတွက် ပုံစံတစ်ခုကို ဖန်တီးသည်-
ဥပမာ
<div class="container">
<h2>Modal Login Example</h2>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-default btn-lg" id="myBtn">Login</button>
<!-- Modal -->
<div class="modal fade" id="myModal" 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 style="color:red;"><span class="glyphicon glyphicon-lock"></span> Login</h4>
</div>
<div class="modal-body">
<form role="form">
<div class="form-group">
<label for="usrname"><span class="glyphicon glyphicon-user"></span> Username</label>
<input type="text" class="form-control" id="usrname" placeholder="Enter email">
</div>
<div class="form-group">
<label for="psw"><span class="glyphicon glyphicon-eye-open"></span> Password</label>
<input type="text" class="form-control" id="psw" placeholder="Enter password">
</div>
<div class="checkbox">
<label><input type="checkbox" value="" checked>Remember me</label>
</div>
<button type="submit" class="btn btn-default btn-success btn-block"><span class="glyphicon glyphicon-off"></span> Login</button>
</form>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-default btn-default pull-left" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> Cancel</button>
<p>Not a member? <a href="#">Sign Up</a></p>
<p>Forgot <a href="#">Password?</a></p>
</div>
</div>
</div>
</div>
</div>