JavaScript ป๊อปอัป

• อาจ 1, 2024

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

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

การแจ้งเตือน ("นี่คือการแจ้งเตือน")



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

save_me = confirm ("นี่คือป๊อปอัปยืนยัน")



แม้ว่าป๊อปอัปจะซับซ้อนที่สุด แต่การแจ้งเตือนยังคงง่าย พรอมต์รับสองอาร์กิวเมนต์ - ข้อความถึงผู้ใช้และค่าเริ่มต้น (หรือ "" ถ้าคุณไม่ต้องการค่าเริ่มต้น) เมื่อกล่องโต้ตอบปรากฏขึ้นผู้ใช้สามารถป้อนข้อมูลที่ร้องขอและกด "ตกลง" นอกจากนี้ยังมีปุ่ม "ยกเลิก" ค่าส่งคืนคือการตอบสนองของผู้ใช้ หากผู้ใช้ยกเลิกค่าตอบแทนคือ โมฆะ. ถ้ากล่องข้อความนั้นว่างเปล่าค่าส่งคืนจะเป็นสตริงว่าง ("") คุณอาจต้องการตรวจสอบค่าเหล่านี้และทำสิ่งพิเศษแทนที่จะใช้ โมฆะ หรือสตริงว่างเป็นการตอบสนองของพวกเขา รหัสสำหรับกล่องข้อความแจ้งคือ:

response = prompt ("นี่คือพรอมต์", "ตอบกลับที่นี่")



คุณสามารถดูการสาธิตของกล่องป๊อปอัปเหล่านี้ได้ที่นี่

---

คำแนะนำวิดีโอ: Build a Popup With JavaScript (อาจ 2024).