Ogohlantirishlar (alerts)
CSS yordamida ogohlantirish xabarlarini yaratishni o‘rganing.
Ogohlantirishlar (alerts)
Ogohlantirish xabarlari foydalanuvchini biror muhim narsa haqida xabardor qilish uchun ishlatilishi mumkin: xavf, muvaffaqiyat, ma’lumot yoki ogohlantirish.
Ogohlantirish xabarini yaratish
1-qadam) HTML qo‘shing:
Misol
<div class="alert">
<span class="closebtn" onclick="this.parentElement.style.display='none';">×</span>
This is an alert box.
</div>
Agar ogohlantirish xabarini yopish imkoniyati kerak bo‘lsa, "meni bosganingizda ota elementimni yashir" degan onclick atributiga ega <span> elementini qo‘shing — ota element konteyner <div> (class="alert") hisoblanadi.
Maslahat: "x" harfini hosil qilish uchun "×" HTML belgisidan (entity) foydalaning.
2-qadam) CSS qo‘shing:
Ogohlantirish bloki va yopish tugmasiga uslub bering:
Misol
/* 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;
}
O‘zingiz sinab ko‘ring »
Bir nechta ogohlantirish
Agar sahifada ko‘plab ogohlantirish xabarlari bo‘lsa, har bir <span> elementida onclick atributidan foydalanmasdan turli ogohlantirishlarni yopish uchun quyidagi skriptni qo‘shishingiz mumkin.
Agar ogohlantirishlar ustiga bosilganda sekin so‘nib yo‘qolishini istasangiz, alert klassiga opacity va transition qo‘shing:
Misol
<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>
O‘zingiz sinab ko‘ring »
Maslahat: Eslatmalar sahifasini ham ko‘rib chiqing.
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!