บทความนี้จะแนะนำตัวอย่างการใช้ HTML5 และ CSS3 เพื่อสร้าง Modal Box และแชร์กับทุกคน โดยมีรายละเอียดดังนี้
ตัวอย่างซอร์สโค้ดบางทีคุณอาจไม่ต้องการอ่านคำแนะนำยาวๆ มากมายด้านล่างนี้ และต้องการดูซอร์สโค้ดหรือตัวอย่างออนไลน์โดยตรง ลิงก์ด้านล่างนี้เป็นกล่องโมดอลการทำงานที่ฉันสร้างขึ้นโดยใช้การเปลี่ยนแปลง CSS3 ความทึบ เหตุการณ์ตัวชี้ และคุณลักษณะอื่นๆ
คุณสามารถคลิกเพื่อไปที่ Github เพื่อดูซอร์สโค้ด: ModalBox-Tutorial
โครงสร้าง HTMLส่วนประกอบส่วนหน้าขับเคลื่อนโดยสถานการณ์ทางธุรกิจและการโต้ตอบ และกล่องโมดอลก็ไม่มีข้อยกเว้น สถานการณ์ทั่วไปคือการดำเนินการ เช่น การคลิกปุ่ม จากนั้นแสดงกล่องโมดอลเพื่อให้คำติชมแก่ผู้ใช้หรือแนะนำผู้ใช้ เพื่อดำเนินการโต้ตอบ การโต้ตอบของกล่องโมดอลอาจมี 5 ขั้นตอน:
1. มีปุ่มหรือลิงค์ที่ผู้ใช้คลิกเพื่อเรียกการแสดงผลของกล่องโมดอล
2. เมื่อกล่องโมดอลปรากฏขึ้น จะมีเลเยอร์มาส์กโปร่งใสที่บล็อกวิวพอร์ตปัจจุบันทั้งหมด
3. เนื้อหาของกล่องโมดอลจะปรากฏในตำแหน่งที่แน่นอน (โดยปกติจะอยู่ตรงกลาง) ของวิวพอร์ตด้วยสีที่ไม่โปร่งใส (โดยปกติจะเป็นสีขาว)
4. เนื้อหาของกล่องโมดอล (โดยปกติจะอยู่ที่มุมขวาบน) จะมีเครื่องหมายปิด การคลิกจะเป็นการซ่อนกล่องโมดอล
5. ควรระบุเนื้อหาของกล่องโมดอลตามสถานการณ์ทางธุรกิจที่เกิดขึ้นจริง ดังนั้นจึงอาจเป็นโครงสร้างใดก็ได้
สไตล์
1. .modalbox ถูกซ่อนไว้ในตอนแรก
1. .modalbox เป็นเลเยอร์มาสก์แบบโปร่งใส
2. .modalbox-dialog เป็นชั้นเนื้อหาที่ไม่โปร่งใส
3. หลังจากคลิกลิงก์แสดงกล่องโมดอล .modalbox จะปรากฏขึ้น
4. หลังจากคลิก .modalbox-close-btn แล้ว .modalbox จะถูกซ่อนไว้
ตัวอย่างเอฟเฟกต์
ข้างต้นคือเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการศึกษาของทุกคน ฉันหวังว่าทุกคนจะสนับสนุน VeVb Wulin Network