การสร้างหน้าต่างป๊อปอัปใน HTML ทำได้โดยใช้ไลบรารี jQuery ซึ่งช่วยให้คุณสามารถรวมตัวจัดการเหตุการณ์เข้ากับหน้าเว็บและทำให้สามารถแสดงเนื้อหาที่ใช้งานอยู่ของไซต์ได้
คำแนะนำ
ขั้นตอนที่ 1
เปิดหน้าไซต์ HTML ของคุณในโปรแกรมแก้ไขข้อความที่คุณใช้เขียนโค้ดที่คุณต้องการ คุณยังสามารถใช้ยูทิลิตี้ Windows Notepad มาตรฐานเพื่อแทรกหน้าต่างป๊อปอัป ในการดำเนินการนี้ ให้คลิกขวาที่ไฟล์ HTML แล้วเลือก "เปิดด้วย" - "Notepad"
ขั้นตอนที่ 2
ในส่วนเอกสาร ให้สร้างเลเยอร์ที่จะจัดการ jQuery:
ขั้นตอนที่ 3
จากนั้นคุณต้องตั้งชื่อหน้าต่างป๊อปอัป ในการดำเนินการนี้ คุณสามารถใช้ส่วนหัว HTML แบบฉัตร:
ชื่อหน้าต่าง
ขั้นตอนที่ 4
หลังจากนั้น ตั้งค่าข้อความที่จะแสดงในหน้าต่างโดยใช้สคริปต์เพื่อสร้างย่อหน้า:
ข้อความ
ขั้นตอนที่ 5
จากนั้นสร้างเลเยอร์ที่มีคลาส close_win เพื่อปิดป๊อปอัป ก่อนปิดแฮนเดิลก่อนหน้า:
ปิดหน้าต่าง
ขั้นตอนที่ 6
รวมไลบรารี jQuery ไว้ในไฟล์โดยเพิ่มแท็กที่จำเป็นระหว่างตัวอธิบายเอกสาร ตัวอย่างเช่น:
ขั้นตอนที่ 7
หลังจากนั้นให้ป้อนรหัสเพื่อแสดงป๊อปอัป:
$ (ฟังก์ชัน () {
$ ('# Show'). ซ่อน ();
ขั้นตอนที่ 8
ถัดไป คุณต้องจัดการเหตุการณ์ที่ผู้ใช้กดปุ่มเมาส์เพื่อเรียกหน้าต่างป๊อปอัปและจัดการการปิดหน้าต่าง เมื่อต้องการทำเช่นนี้ ให้ป้อนรหัสต่อไปนี้:
$ ('# Click-me'). คลิก (ฟังก์ชัน () {$ ('# show'). Fadein (300);})
$ ('# Close_win'). คลิก (ฟังก์ชัน () {$ ('# show'). FadeOut (300);})
& lt / สคริปต์>})
โปรแกรมนี้จัดการผู้ใช้ที่กดปุ่มเพื่อเรียกหน้าต่างป๊อปอัปและคลิกที่ลิงค์เพื่อปิด
ขั้นตอนที่ 9
ในการแสดงหน้าต่างป๊อปอัปบนหน้า คุณสามารถใช้ลิงก์ของคลาส click-me ที่ระบุไว้ในโค้ดด้านบน เมื่อต้องการทำเช่นนี้ ให้ป้อนรหัสต่อไปนี้ในเนื้อหาของเอกสาร:
คลิกเพื่อแสดงป๊อปอัป
