กล่องแจ้งเตือนคืออะไร
กล่องแจ้งเตือนเป็นหน้าต่างเล็กๆ ที่ปรากฏขึ้นเพื่อตอบสนองต่อการโต้ตอบของผู้ใช้บางประเภท (การคลิก การเลื่อน การพิมพ์ ฯลฯ) กล่องแจ้งเตือนส่วนใหญ่จะใช้เพื่อเตือนผู้ใช้เกี่ยวกับปัญหา แต่ยังใช้เพื่อแจ้งผู้ใช้ปลายทางเท่านั้น
ตัวอย่างทั่วไปของการใช้กล่องแจ้งเตือนคือ ถ้าผู้ใช้คลิกปุ่มส่งแบบฟอร์ม แต่ลืมกรอกข้อมูลในฟิลด์ที่จำเป็น กล่องแจ้งเตือนจะปรากฏขึ้นพร้อมกับข้อความที่อธิบายปัญหาให้กับผู้ใช้:
วิธีสร้างกล่องแจ้งเตือน
มาจำลองช่องแจ้งเตือนจากภาพหน้าจอด้านบนกัน
ขั้นแรก เพิ่มสร้างองค์ประกอบปุ่มเพื่อใช้เป็นทริกเกอร์:
<button onclick="missingFieldWarningPopup()">Submit form</button>
เพิ่มฟังก์ชัน JavaScript นี้ใน .js
. ของคุณ ไฟล์:
function missingFieldWarningPopup() {
alert("You forgot to fill out all the required input fields!")
}
เกิดอะไรขึ้นในโค้ด: องค์ประกอบปุ่มมี onclick
แอตทริบิวต์เป็นทริกเกอร์เหตุการณ์การคลิก เมื่อผู้ใช้คลิกที่ปุ่ม เหตุการณ์การคลิกจะเรียก missingFieldWarningPopup()
ซึ่งจะแสดง alert()
หน้าต่างพรอมต์และแสดงสตริง (ข้อความ) ภายใน
หากคุณต้องการเพิ่มฟังก์ชัน JavaScript เป็น inline โค้ดแล้วเพิ่มสิ่งนี้ใน <head>
องค์ประกอบของเอกสาร HTML ของคุณ:
<script type="text/javascript">
function missingFieldWarningPopup() {
alert("You forgot to fill out all the required input fields!")
}
</script>
ตัวอย่างโค้ด