วิธีการสร้างไดอะล็อกบ็อกซ์กำหนดเองใน AJAX สำหรับ HTML5 และ CSS3 การเขียนโปรแกรม - Dummies วิธีการสร้างไดอะล็อกบ็อกซ์กำหนดเองใน AJAX สำหรับ HTML5 และ CSS3 การเขียนโปรแกรม

AJAX อนุญาตให้โปรแกรมเมอร์ HTML5 และ CSS3 สร้างไดอะล็อกบ็อกซ์กำหนดเอง JavaScript มีกล่องโต้ตอบเพียงไม่กี่ (กล่องโต้ตอบการแจ้งเตือนและพร้อมท์) แต่เหล่านี้ค่อนข้างน่าเกลียดและไม่ยืดหยุ่น jQuery UI มีเทคนิคในการเปลี่ยน div ใด ๆ ลงในกล่องโต้ตอบเสมือน กล่องโต้ตอบจะทำตามรูปแบบและปรับขนาดได้และสามารถเคลื่อนย้ายได้

สร้าง div ที่คุณต้องการใช้เป็นกล่องโต้ตอบ

1. สร้าง div และให้รหัสเพื่อให้คุณสามารถเปลี่ยนเป็นโหนดกล่องโต้ตอบได้ เพิ่มชื่อแอตทริบิวต์และชื่อปรากฏขึ้นในแถบชื่อเรื่องของกล่องโต้ตอบ

   คลาสไดอะล็อกช่วยให้คุณมีกรอบโต้ตอบที่กำหนดเองที่สามารถเคลื่อนย้ายได้ซึ่งเหมาะกับธีมของเพจที่ติดตั้ง

   หมุน div ลงในกล่องโต้ตอบ
   

2. ใช้วิธีการโต้ตอบ () เพื่อเปิด div ลงในโหนดกล่องโต้ตอบ jQuery ในฟังก์ชัน init ():

   $ ("# dialog") โต้ตอบ ();

   ซ่อนไดอะล็อกโดยค่าเริ่มต้น
   

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

   ปิดกล่องโต้ตอบ

4. เมื่อต้องการปิดกล่องโต้ตอบให้อ้างอิงโหนดกล่องโต้ตอบและเรียกใช้เมธอด dialog () บนอีกครั้ง ครั้งนี้ส่งค่าเดียว "ปิด" เป็นพารามิเตอร์และกล่องโต้ตอบจะปิดทันที:

   // เริ่มต้นปิดการโต้ตอบ $ ("โต้ตอบ #") โต้ตอบ ("ใกล้");

   การคลิกที่ X จะปิดกล่องโต้ตอบโดยอัตโนมัติ
   

5. กล่องโต้ตอบมีขนาดเล็ก X ซึ่งมีลักษณะคล้ายกับไอคอนปิดหน้าต่างในระบบหน้าต่างส่วนใหญ่ ผู้ใช้สามารถปิดกล่องโต้ตอบได้โดยคลิกที่ไอคอนนี้

   คุณสามารถเปิดและปิดกล่องโต้ตอบด้วยรหัส

6. My Dialog เปิดและปิด Dialog ปุ่มเรียกฟังก์ชันที่ควบคุมพฤติกรรมของกล่องโต้ตอบ ตัวอย่างเช่นนี่คือฟังก์ชันที่แนบมากับปุ่มเปิดไดอะล็อก:

   ฟังก์ชัน openDialog () {$ ("# dialog") dialog ("open");} / / end openDialog