လုပ်နည်း - သတိပေးချက်များ
CSS ဖြင့် သတိပေးချက်စာတိုများ ဖန်တီးနည်းကို လေ့လာပါ။
သတိပေးချက်များ
အထူးတစ်ခုခုအကြောင်း သုံးစွဲသူအား အသိပေးရန် သတိပေးချက် မက်ဆေ့ချ်များကို သုံးနိုင်သည်- အန္တရာယ်၊ အောင်မြင်မှု၊ သတင်းအချက်အလက် သို့မဟုတ် သတိပေးချက်။
သတိပေးချက်တစ်ခု ဖန်တီးပါ။
အဆင့် 1) HTML ကိုထည့်ပါ
ဥပမာ
<div class="alert">
<span class="closebtn"
onclick="this.parentElement.style.display='none';">×</span>
This is an alert box.
</div>
သတိပေးချက် မက်ဆေ့ချ်ကို ပိတ်နိုင်စေလိုပါက၊ onclick"ငါ့ကိုနှိပ်သည့်အခါ၊ ကျွန်ုပ်၏မိခင်ဒြပ်စင်ကို ဝှက်ထားရန်" ဟူသော ရည်ညွှန်းချက်ဖြင့် <span> ဒြပ်စင်ကို ထည့်ပါ - ကွန်တိန်နာ <div> (class="alert") ဖြစ်သည်။
အကြံပြုချက်-× စာလုံး "x" ကို ဖန်တီးရန် HTML entity " " ကိုသုံးပါ။
အဆင့် 2) CSS ကိုထည့်ပါ
သတိပေးချက်ဘောက်စ်နှင့် ပိတ်ခလုတ်ကို ပုံစံထုတ်ပါ-
ဥပမာ
/* The alert message box */
.alert {
padding: 20px;
background-color: #f44336; /* Red */
color: white;
margin-bottom: 15px;
}
/* The close button */
.closebtn {
margin-left: 15px;
color: white;
font-weight: bold;
float: right;
font-size: 22px;
line-height: 20px;
cursor: pointer;
transition: 0.3s;
}
/* When
moving the mouse over the close button */
.closebtn:hover {
color: black;
}
သတိပေးချက်များစွာ
သင့်တွင် စာမျက်နှာတစ်ခုပေါ်တွင် သတိပေးချက်မက်ဆေ့ချ်များစွာရှိပါက၊ <span> ဒြပ်စင်တစ်ခုစီရှိ onclick attribute ကို အသုံးမပြုဘဲ မတူညီသောသတိပေးချက်များကို ပိတ်ရန် အောက်ပါ script ကို သင်ထည့်နိုင်ပါသည်။
ပြီးလျှင်၊ သင် ၎င်းတို့ကို နှိပ်လိုက်သည့်အခါ သတိပေးချက်များကို ဖြည်းဖြည်းချင်း ကွယ်ပျောက်စေလိုလျှင် အတန်း ထဲသို့ opacity
ပေါင်း ထည့်ပါ-transitionalert
ဥပမာ
<style>
.alert {
opacity: 1;
transition: opacity 0.6s; /* 600ms to fade out */
}
</style>
<script>
// Get all elements with class="closebtn"
var close = document.getElementsByClassName("closebtn");
var
i;
// Loop through all close buttons
for (i = 0; i < close.length; i++) {
// When someone clicks on a close button
close[i].onclick =
function(){
// Get the
parent of <span class="closebtn"> (<div class="alert">)
var div = this.parentElement;
// Set the opacity of div to
0 (transparent)
div.style.opacity = "0";
// Hide the div after 600ms
(the same amount of milliseconds it takes to fade out)
setTimeout(function(){ div.style.display = "none"; }, 600);
}
}
</script>
အကြံပြုချက်- Notes ကိုလည်း စစ်ဆေးကြည့်ပါ ။