วิธีทำหน้าต่างลอย

สารบัญ:

วิธีทำหน้าต่างลอย
วิธีทำหน้าต่างลอย

วีดีโอ: วิธีทำหน้าต่างลอย

วีดีโอ: วิธีทำหน้าต่างลอย
วีดีโอ: วิธีเรียกใช้แอปแบบ"หน้าต่างขนาดเล็ก"มือถือOPPO เวอร์ชั่นAndroid11 2024, อาจ
Anonim

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

วิธีทำหน้าต่างลอย
วิธีทำหน้าต่างลอย

คำแนะนำ

ขั้นตอนที่ 1

แทรกแท็กลงในโค้ดของเพจที่เพิ่มไลบรารี jQuery แท็กเหล่านี้ดูค่อนข้างมาตรฐาน:

สคริปต์ src = "jQuery.js" / script

สคริปต์ src = "interface.js" / script

ขั้นตอนที่ 2

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

ขั้นตอนที่ 3

วางโค้ดสำหรับลิงก์ของป๊อปอัปลงในเนื้อหาของหน้า และอธิบายสคริปต์สำหรับการเปิดป๊อปอัป อธิบายฟังก์ชันเรียกหน้าต่างโดยใช้คำสั่งมาตรฐาน show (), TransferTo (), bind () และอื่นๆ พยายามเขียนคำอธิบายเล็กๆ น้อยๆ สำหรับตัวคุณเองข้างแต่ละฟังก์ชัน เพื่อไม่ให้สับสนในโค้ด เนื่องจากคุณสามารถขัดขวางการทำงานของระบบทั้งหมดได้

ขั้นตอนที่ 4

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