การสร้างคำถาม ใช่/ไม่ใช่ ใน Javascript

เมื่อสร้างแอพพลิเคชันบนเว็บ การโต้ตอบของผู้ใช้เป็นกุญแจที่สำคัญในการสร้างประสบการณ์ที่ราบรื่น หนึ่งในสถานการณ์ที่นักพัฒนามักพบคือความจำเป็นในการถามคำถาม ใช่/ไม่ใช่ กับผู้ใช้ อย่างไรก็ตาม ฟังก์ชัน confirm() ที่มีอยู่ใน Javascript ถึงแม้ว่าจะใช้งานได้จริง แต่ก็มีเพียงปุ่ม ตกลง/ยกเลิก เท่านั้น ดังนั้นจะทำอย่างไรให้สร้างกล่องโมดัลที่ปรับให้เหมาะสมมากขึ้นซึ่งเสนอทางเลือก ใช่/ไม่ใช่ ให้กับผู้ใช้?

ข้อจำกัดของกล่องโมดัลในตัว

Javascript มีกล่องโมดัลในตัวอยู่บ้าง ได้แก่ alert, confirm และ prompt อย่างไรก็ตาม ไม่มีคำกล่าวที่ชัดเจนสำหรับตัวเลือก ใช่/ไม่ใช่ ใด ๆ นี่คือการสรุปอย่างรวดเร็วเกี่ยวกับตัวเลือกเหล่านี้:

• alert(): แสดงข้อความให้กับผู้ใช้ด้วยปุ่มตกลง เป็นประโยชน์สำหรับการแจ้งเตือน แต่ไม่สามารถถามคำถามได้
• confirm(): ถามคำถามใช่/ไม่ใช่และคืนค่าบูลีน (true หรือ false) อย่างไรก็ตาม มันใช้ปุ่ม ตกลง/ยกเลิก แทนที่จะเป็น ใช่/ไม่ใช่
• prompt(): อนุญาตให้ผู้ใช้ป้อนข้อมูล แต่ไม่เหมาะกับการโต้ตอบแบบใช่/ไม่ใช่และมีเพียงปุ่มตกลง/ยกเลิกเท่านั้น

ฟังก์ชันในตัวเหล่านี้อาจไม่เพียงพอต่อความต้องการเฉพาะของคุณ ซึ่งทำให้เราต้องสำรวจโซลูชันที่กำหนดเอง

โซลูชันป๊อปอัพโมดัลที่กำหนดเอง

เพื่อสร้างคำถาม ใช่/ไม่ใช่ หลายๆ นักพัฒนาหันไปใช้ไลบรารีของบุคคลที่สามที่อนุญาตให้มีกล่องโต้ตอบที่ปรับแต่งได้มากขึ้น หนึ่งในโซลูชันดังกล่าวคือ ModalBox นี่คือภาพรวมอย่างรวดเร็วเกี่ยวกับวิธีการใช้งาน:

การใช้งาน ModalBox

1. การติดตั้ง: ก่อนอื่นให้รวม ModalBox เข้ากับโปรเจกต์ของคุณ คุณสามารถหาสามารถได้ที่ GitHub ที่นี่.

2. โครงสร้าง HTML: ตั้งค่าโครงสร้าง HTML ของกล่องโมดัลของคุณ นี่คือตัวอย่างโครงสร้างพื้นฐานสำหรับโมดัลของคุณ:

   <div id="myModal" class="modal">
       <div class="modal-content">
           <span class="close">&times;</span>
           <p>คุณแน่ใจหรือไม่ว่าต้องการดำเนินการ?</p>
           <button id="yesButton">ใช่</button>
           <button id="noButton">ไม่ใช่</button>
       </div>
   </div>
   

3. การตกแต่งโมดัล: อย่าลืมเพิ่มสไตล์ให้กับโมดัลของคุณเพื่อประสบการณ์ที่ดียิ่งขึ้น นี่คือตัวอย่าง CSS ง่ายๆ:

   .modal {
       display: none; 
       position: fixed; 
       z-index: 1; 
       left: 0;
       top: 0;
       width: 100%; 
       height: 100%;
       overflow: auto; 
       background-color: rgb(0,0,0);
       background-color: rgba(0,0,0,0.4);
   }
   
   .modal-content {
       background-color: #fefefe;
       margin: 15% auto; 
       padding: 20px;
       border: 1px solid #888;
       width: 80%;
   }
   

4. ฟังก์ชันการทำงานของ Javascript: สุดท้ายให้เพิ่ม Javascript ที่จะเปิดโมดัลเมื่อจำเป็นและจัดการคลิกปุ่ม:

   document.getElementById('myModal').style.display = "block"; // เปิดโมดัล
   
   document.getElementById("yesButton").onclick = function() {
       console.log("ผู้ใช้คลิก ใช่");
       // เพิ่มการกระทำของคุณสำหรับ "ใช่" ที่นี่
       document.getElementById('myModal').style.display = "none"; 
   }
   
   document.getElementById("noButton").onclick = function() {
       console.log("ผู้ใช้คลิก ไม่ใช่");
       // เพิ่มการกระทำของคุณสำหรับ "ไม่ใช่" ที่นี่
       document.getElementById('myModal').style.display = "none"; 
   }
   
   document.getElementsByClassName("close")[0].onclick = function() {
       document.getElementById('myModal').style.display = "none"; 
   }
   

สรุป

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

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