เรียนรู้วิธีการสร้างข้อความแจ้งเตือนด้วย CSS
การแจ้งเตือน
ข้อความแจ้งเตือนสามารถใช้ในการแจ้งให้ผู้ใช้เกี่ยวกับบางสิ่งที่พิเศษ: อันตรายที่ประสบความสำเร็จข้อมูลหรือคำเตือน
×อันตราย! บ่งชี้ว่ามีการกระทำที่เป็นอันตรายหรือเชิงลบ
ที่ประสบความสำเร็จ×! บ่งชี้ว่ามีการดำเนินการที่ประสบความสำเร็จหรือบวก
ข้อมูล×! บ่งชี้ว่ามีการเปลี่ยนแปลงข้อมูลที่เป็นกลางหรือการกระทำ
คำเตือน×! แสดงให้เห็นคำเตือนว่าอาจจำเป็นต้องให้ความสนใจ
สร้างข้อความแจ้งเตือน
ขั้นตอนที่ 1) เพิ่ม HTML:
ตัวอย่าง
<div class="alert">
<span class="closebtn"
onclick="this.parentElement.style.display='none';">×</span>
This is an alert box.
</div> หากคุณต้องการความสามารถในการปิดข้อความแจ้งเตือนให้เพิ่ม <span> องค์ประกอบที่มี onclick แอตทริบิวต์ที่ระบุว่า "when you click on me, hide my parent element" - ซึ่งเป็นภาชนะ <div> (class="alert") .
เคล็ดลับ: ใช้ HTML กิจการ " × " เพื่อสร้างตัวอักษร "x"
ขั้นตอนที่ 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;
}
.closebtn:hover {
color: black;
} ลองตัวเอง» การแจ้งเตือนหลาย
หากคุณมีข้อความแจ้งเตือนหลายบนหน้าคุณสามารถเพิ่มสคริปต์ต่อไปนี้จะปิดการแจ้งเตือนที่แตกต่างกันโดยไม่ต้องใช้ onclick แอตทริบิวต์ในแต่ละ <span> องค์ประกอบ
และถ้าคุณต้องการการแจ้งเตือนจะค่อยๆหายไปเมื่อคุณคลิกที่พวกเขาเพิ่ม opacity และ transition ที่จะ alert ระดับ:
ตัวอย่าง
<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>
ลองตัวเอง»