W3.CSS Modal
modal သည် လက်ရှိစာမျက်နှာ၏ထိပ်တွင်ပြသထားသည့် dialog box/popup window တစ်ခုဖြစ်သည်-
W3.CSS Modal အတန်းများ
W3.CSS သည် modal windows အတွက် အောက်ပါ အတန်းများကို ပံ့ပိုးပေးသည်-
| အတန်း | သတ်မှတ်ပါတယ်။ |
|---|---|
| w3-modal | modal ကွန်တိန်နာ |
| w3-modal-အကြောင်းအရာ | modal အကြောင်းအရာ |
Modal တစ်ခုဖန်တီးပါ။
w3-modal class သည် modal တစ်ခုအတွက် container တစ်ခုကို သတ်မှတ်သည်။
w3-modal-content class သည် modal အကြောင်းအရာကို သတ်မှတ်သည်။
Modal အကြောင်းအရာသည် မည်သည့် HTML ဒြပ်စင် (divs၊ ခေါင်းစီးများ၊ စာပိုဒ်များ၊ ရုပ်ပုံများ စသည်) ဖြစ်နိုင်သည်။
ဥပမာ
<!-- Trigger/Open the Modal -->
<button onclick="document.getElementById('id01').style.display='block'"
class="w3-button">Open Modal</button>
<!-- The Modal -->
<div
id="id01" class="w3-modal">
<div class="w3-modal-content">
<div
class="w3-container">
<span onclick="document.getElementById('id01').style.display='none'"
class="w3-button w3-display-topright">×</span>
<p>Some text in the Modal..</p>
<p>Some text in the Modal..</p>
</div>
</div>
</div>
Modal ကိုဖွင့်ပါ။
modal ကိုဖွင့်ရန် မည်သည့် HTML အစိတ်အပိုင်းကိုမဆို အသုံးပြုပါ။ သို့သော် ၎င်းသည် ခလုတ်တစ်ခု သို့မဟုတ် လင့်ခ်တစ်ခုဖြစ်သည်။
onclick attribute ကိုထည့် ကာ document.getElementById() method ကိုအသုံးပြု၍ modal ( id01 ) ၏ ID ကိုညွှန်ပြပါ။
Modal ကိုပိတ်ပါ။
modal ကိုပိတ်ရန်၊ modal ( id01 ) ကိုညွှန်ပြသည့် onclick attribute နှင့်အတူ element တစ်ခုသို့ w3-button class ကို ပေါင်းထည့်ပါ။ modal ၏ အပြင်ဘက်တွင် နှိပ်ခြင်းဖြင့် ၎င်းကို ပိတ်နိုင်သည် (အောက်ပါ ဥပမာကို ကြည့်ပါ)။
အကြံပြုချက်- × အက္ခရာ "x" ထက် အနီးကပ် အိုင်ကွန်များအတွက် ဦးစားပေး HTML အကြောင်းအရာဖြစ်သည်။
Modal Header နှင့် Footer
modal အကြောင်းအရာအတွင်း မတူညီသော ကဏ္ဍများကို ဖန်တီးရန် w3-container အတန်းများကို သုံး ပါ-
ဥပမာ
<div id="id01" class="w3-modal">
<div class="w3-modal-content">
<header class="w3-container w3-teal">
<span onclick="document.getElementById('id01').style.display='none'"
class="w3-button w3-display-topright">×</span>
<h2>Modal Header</h2>
</header>
<div
class="w3-container">
<p>Some text..</p>
<p>Some text..</p>
</div>
<footer class="w3-container
w3-teal">
<p>Modal Footer</p>
</footer>
</div>
</div>
ကတ်တစ်ခုအနေဖြင့် Modal
ကတ်တစ်ခုအနေဖြင့် modal ကိုပြသရန် w3-card-* အတန်း များထဲမှ တစ်ခုကို w3-modal-content container သို့ ထည့်ပါ-
ဥပမာ
<div class="w3-modal-content w3-card-4">
ကာတွန်းပုံစံများ
သတ်မှတ်ထားသော ဦးတည်ချက်မှ modal သို့ လျှော ကျရန် w3-animate-zoom|အပေါ်|အောက်ခြေ|ညာ|လက်ဝဲ အတန်းများကို အသုံးပြုပါ။
ဥပမာ
<div class="w3-modal-content w3-animate-zoom">
<div class="w3-modal-content w3-animate-top">
<div class="w3-modal-content w3-animate-bottom">
<div class="w3-modal-content w3-animate-left">
<div class="w3-modal-content w3-animate-right">
<div class="w3-modal-content w3-animate-opacity">
w3-modal ဒြပ်စင်ပေါ်တွင် w3-animate-opacity class ကို သတ်မှတ်ခြင်းဖြင့် modal ၏ နောက်ခံအရောင်တွင် မှိန်သွားနိုင်သည် ။
ဥပမာ
<div class="w3-modal w3-animate-opacity">
Modal ပုံ
အရွယ်အစား အပြည့်အစုံဖြင့် ၎င်းကို modal အဖြစ်ပြသရန် ပုံကို နှိပ်ပါ။
ဥပမာ
<img src="img_snowtops.jpg" onclick="document.getElementById('modal01').style.display='block'"
class="w3-hover-opacity">
<div id="modal01" class="w3-modal w3-animate-zoom" onclick="this.style.display='none'">
<img class="w3-modal-content" src="img_snowtops.jpg">
</div>
Modal ရုပ်ပုံပြခန်း
အရွယ်အစား အပြည့်ဖြင့် ပြသရန် ပုံပေါ်တွင် ကလစ်နှိပ်ပါ။
ဥပမာ
<div class="w3-row-padding">
<div class="w3-container w3-third">
<img src="img_snowtops.jpg" style="width:100%" onclick="onClick(this)">
</div>
<div class="w3-container w3-third">
<img
src="img_lights.jpg" style="width:100%" onclick="onClick(this)">
</div>
<div class="w3-container w3-third">
<img
src="img_mountains.jpg" style="width:100%" onclick="onClick(this)">
</div>
</div>
<div id="modal01" class="w3-modal" onclick="this.style.display='none'">
<img class="w3-modal-content" id="img01" style="width:100%">
</div>
<script>
function
onClick(element) {
document.getElementById("img01").src = element.src;
document.getElementById("modal01").style.display = "block";
}
</script>
Modal Login Form
ဤဥပမာသည် လော့ဂ်အင်အတွက် ပုံစံတစ်ခုကို ဖန်တီးသည်-
ဥပမာ
တဘ်ပါရှိသော အကြောင်းအရာပါသော Modal
ဤဥပမာသည် တက်ဘ်လုပ်ထားသော အကြောင်းအရာပါသည့် ပုံစံတစ်ခုကို ဖန်တီးသည်-
ဥပမာ
Close the Modal
In the examples above, we use a button to close the modal. However, with a little bit of JavaScript, you can also close the modal when clicking outside of the modal box:
Example
// Get the modal
var modal = document.getElementById('id01');
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target
== modal) {
modal.style.display = "none";
}
}
Advanced: Lightbox (Modal Image Gallery)
This example shows how to add an image slideshow inside a modal, to create a "lightbox":
Nature and sunrise
❮ ❯
Example
Tip: To learn more about slideshows, visit our W3.CSS Slideshow chapter.