ในตัวอย่างนี้ มีการสร้างเพจสองเพจ ดังแสดงในรูปที่ 1 Index.html คือเพจที่แสดงในหน้าต่างย่อย และเพจชื่อ firstpage.html มีลิงก์สำหรับเปิด Index.html ในหน้าต่างย่อย เมื่อคลิกลิงก์แล้ว index.html จะเปิดขึ้นในหน้าต่างลูก คุณสามารถคลิกลิงก์ "ปิด" ในหน้าต่างย่อยได้โดยตรงเพื่อปิดหน้าต่างย่อย หรือคุณสามารถเพิกเฉยต่อหน้าต่างย่อยจะปิดโดยอัตโนมัติหลังจากผ่านไป 15 วินาที
รูปที่ 1 การดำเนินการเฉพาะของหน้าป๊อปอัปของเบราว์เซอร์
เป็นดังนี้:
1. สร้างโฟลเดอร์ Smlple ในไซต์ท้องถิ่น
2. ในโฟลเดอร์ Smlple สร้างไฟล์ชื่อ Index.html และ firstpage.html
3. ดับเบิลคลิก Index.html เพื่อเปิดเอกสารและเข้าสู่หน้าต่างมุมมองการออกแบบของเอกสาร
4. คลิกเมนู View/Head Content เพื่อแสดงพื้นที่ส่วนหัวของเอกสาร
5. คลิกบานหน้าต่างส่วนหัวของเอกสารในหน้าต่างมุมมองการออกแบบ เลือกเมนู แทรก/แท็กที่มองไม่เห็น/สคริปต์ เพื่อเปิดกล่องโต้ตอบสคริปต์แทรก ดังแสดงในรูปที่ 2 เลือกตัวเลือก JavaScript ในกล่องรายการภาษาแบบเลื่อนลง และป้อน "setTimeout("self.close()", 15000)" ในกล่องข้อความ Coctento คลิกปุ่มตกลงเพื่อเสร็จสิ้นสคริปต์ที่จะปิดหน้าต่างลูกโดยอัตโนมัติ 15 วินาทีหลังจากแทรกลงในส่วนหัวของเอกสาร ในโค้ด 15,000 หมายถึง 15,000 มิลลิวินาที ซึ่งก็คือ 15 วินาที คุณยังสามารถแก้ไขเป็นจำนวนมิลลิวินาทีที่คุณต้องการได้ตามต้องการ
รูปที่ 2 ตั้งเวลา
6. ป้อนคำว่า "ปิด" ในหน้าต่างเอกสาร ป้อน "###" ในกล่องข้อความลิงก์บนแผงคุณสมบัติ และตั้งค่าเป็นลิงก์ว่าง
7. ในตัวแก้ไขแท็กด่วนที่ด้านซ้ายสุดของแถบสถานะ ให้คลิกปุ่มแท็ก เลือกลิงก์ "ปิด" จากนั้นกดปุ่ม Ctrl+T พร้อมกันเพื่อเปิด Quick Tag Editor และเข้าสู่โหมดแก้ไขแท็กของ Quick Tag Editor จากนั้นป้อน "onclick="selfclose()"" ก่อน ">" ดังแสดงในรูปที่ 3 หลังจากการตั้งค่าเสร็จสิ้น ให้คลิกปุ่ม OK เพื่อยืนยันการดำเนินการ ด้วยวิธีนี้ หลังจากที่เปิด Index.html เป็นหน้าต่างย่อยแล้ว การคลิกลิงก์จะสามารถปิดหน้าต่างย่อยได้ทันที
รูปที่ 3 ตั้งเวลา
8. บันทึกไฟล์ Index.html และออกจากหน้าต่าง Dremweaver ของ index.html
9. ตอนนี้เริ่มออกแบบเพจ fristpage.html ในโฟลเดอร์ Smlple ของไซต์ท้องถิ่น คลิกสองครั้งที่ fristpage.html เพื่อเปิดเอกสารและเข้าสู่หน้าต่างมุมมองการออกแบบของเอกสาร
10. ป้อนคำว่า "คลิกที่นี่เพื่อเปิดหน้าต่างย่อยที่จะปิดโดยอัตโนมัติ" ในเอกสาร จากนั้นป้อน "###" ในกล่องข้อความลิงก์บนแผงคุณสมบัติเพื่อตั้งค่าเป็นลิงก์ว่าง
11. คุณสามารถตั้งค่าหน้าต่าง Index.html ให้เปิดเมื่อมีการคลิกลิงก์ได้โดยใช้ลักษณะการทำงานเปิดหน้าต่างเบราว์เซอร์กับลิงก์ แต่วิธีที่สะดวกกว่าคือใช้ Quick Identity Editor ในการดำเนินการนี้ ขั้นแรกให้วางจุดแทรกลงในลิงก์ จากนั้นคลิกปุ่มข้อมูลประจำตัวบนตัวเลือกข้อมูลประจำตัวที่ด้านซ้ายสุดของแถบสถานะเพื่อเลือกลิงก์ทั้งหมด จากนั้นกดปุ่ม Ctrl+T พร้อมกันเพื่อเปิด Quick Tag Editor และเข้าสู่โหมดแก้ไขโลโก้ของ Quick Tag Editor จากนั้นป้อน "onclick="window.open('index.html',null','width=200px, height=200px')" ก่อน ">" (ดังแสดงในรูปที่ 4) หลังจากการตั้งค่าเสร็จสิ้น ให้กดปุ่ม Enter เพื่อยืนยันการทำงาน
รูปที่ 4 การตั้งค่าลิงค์ให้เปิดเมื่อคลิก
12 การดำเนินการข้างต้นเสร็จสิ้นการตั้งค่าสำหรับตัวอย่างนี้ คุณสามารถคลิกเมนูและใช้ File/save เพื่อบันทึกงานของคุณได้ จากนั้นกดปุ่ม F12 เพื่อดูตัวอย่างเอฟเฟกต์หน้าในเบราว์เซอร์