Computer >> คอมพิวเตอร์ >  >> การเขียนโปรแกรม >> Javascript

วิธีสร้างกล่องแจ้งเตือนด้วย JavaScript

กล่องแจ้งเตือนคืออะไร

กล่องแจ้งเตือนเป็นหน้าต่างเล็กๆ ที่ปรากฏขึ้นเพื่อตอบสนองต่อการโต้ตอบของผู้ใช้บางประเภท (การคลิก การเลื่อน การพิมพ์ ฯลฯ) กล่องแจ้งเตือนส่วนใหญ่จะใช้เพื่อเตือนผู้ใช้เกี่ยวกับปัญหา แต่ยังใช้เพื่อแจ้งผู้ใช้ปลายทางเท่านั้น

ตัวอย่างทั่วไปของการใช้กล่องแจ้งเตือนคือ ถ้าผู้ใช้คลิกปุ่มส่งแบบฟอร์ม แต่ลืมกรอกข้อมูลในฟิลด์ที่จำเป็น กล่องแจ้งเตือนจะปรากฏขึ้นพร้อมกับข้อความที่อธิบายปัญหาให้กับผู้ใช้:

วิธีสร้างกล่องแจ้งเตือนด้วย JavaScript

วิธีสร้างกล่องแจ้งเตือน

มาจำลองช่องแจ้งเตือนจากภาพหน้าจอด้านบนกัน

ขั้นแรก เพิ่มสร้างองค์ประกอบปุ่มเพื่อใช้เป็นทริกเกอร์:

<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>

ตัวอย่างโค้ด