หน้าต่างป๊อปอัปสำหรับวัตถุประสงค์ที่หลากหลายมีประโยชน์มากมายในการสร้างเว็บ สามารถใช้เพื่อสร้างเมนูประเภทต่างๆ วางข้อความโฆษณาและกราฟิก คำแนะนำเครื่องมือเมื่อกรอกแบบฟอร์มที่ซับซ้อน และสะดวกในการวางแบบฟอร์มในหน้าต่างที่ไม่กินเนื้อที่บนหน้า ในบทความของเราคุณจะพบคำอธิบายเกี่ยวกับวิธีการสร้างหน้าต่างดังกล่าว
มันจำเป็น
ความรู้เบื้องต้นเกี่ยวกับ HTML
คำแนะนำ
ขั้นตอนที่ 1
ป๊อปอัป, html, เลเยอร์ที่ซ่อนอยู่
ขั้นตอนที่ 2
ในหลาย ๆ หน้าบนเว็บ คุณจะเห็นว่าไลบรารีแฟนซีของเฟรมเวิร์ก JavaScript ต่างๆ (jQuery, MooTools, Prototype เป็นต้น) ถูกใช้เพื่อสร้างหน้าต่างป๊อปอัปในหน้าต่างๆ อย่างไรก็ตาม อันที่จริง ไม่จำเป็นเมื่อต้องแก้ไขปัญหานี้โดยเฉพาะ เครื่องมือที่มีให้ใน Hypertext Markup Language (HTML) และ Cascading Style Sheets (CSS) เพียงพอที่จะสร้างป๊อปอัป หน้าต่างที่สร้างขึ้นในลักษณะนี้จะทำงานได้ไม่ว่าจะเปิดใช้งาน JavaScript ในเบราว์เซอร์ของผู้เยี่ยมชมหรือไม่ก็ตาม
รหัสทั้งหมดที่สร้างป๊อปอัปสามารถวางได้สองบรรทัด บรรทัดแรกสร้างลิงค์ที่ต้องคลิกเพื่อแสดงป๊อปอัป:
คลิกที่นี่!
ที่นี่แอตทริบิวต์ onmouseover ของแท็กลิงก์จะตั้งค่าประเภทเคอร์เซอร์ของเมาส์เริ่มต้นสำหรับลิงก์ แอตทริบิวต์ onclick ระบุว่าเมื่อมีการคลิกลิงก์ บล็อกป๊อปอัปที่ซ่อนอยู่ควรปรากฏให้เห็น
อันที่จริงบรรทัดที่สองคือหน้าต่างป๊อปอัป เลเยอร์ด้วยตัวระบุป๊อปอัปและขนาดของหน้าต่าง สีและขนาดของข้อความ พื้นหลัง และเส้นขอบที่ระบุในแอตทริบิวต์สไตล์:
นี่คือข้อความในป๊อปอัป
ไม่ปรากฏตามค่าเริ่มต้น - ซึ่งระบุโดยตัวเลือกการแสดงผลที่มีค่า none ในคำอธิบายสไตล์เลเยอร์
อันที่จริง นี่คือทั้งหมดที่คุณต้องการเพื่อสร้างหน้าต่างป๊อปอัป - วางสองบรรทัดนี้ระหว่างแท็กและเพจของคุณ เท่านี้ก็พร้อมใช้งาน
ขั้นตอนที่ 3
เพื่อให้สามารถปิดหน้าต่างป๊อปอัปด้านหน้าแท็กได้ คุณต้องเพิ่มลิงก์ที่ดำเนินการตรงกันข้าม - ซ่อนเลเยอร์ที่มองเห็นได้ด้วยตัวระบุป๊อปอัป:
ปิด
ขั้นตอนที่ 4
และถ้าคุณต้องการให้หน้าต่างปรากฏขึ้นโดยไม่ได้คลิก แต่โดยการวางเคอร์เซอร์ของเมาส์ไว้ บรรทัดแรกที่มีลิงก์จะต้องแก้ไขในลักษณะนี้:
เลื่อนเมาส์ไปที่นี่!
ขั้นตอนที่ 5
ตอนนี้คุณคุ้นเคยกับหลักการและโครงสร้างของรหัสหน้าต่างป๊อปอัปแล้ว และการออกแบบรูปลักษณ์และเนื้อหาของมันขึ้นอยู่กับเป้าหมายและจินตนาการของคุณโดยสิ้นเชิง