คัดลอกรหัสรหัสดังต่อไปนี้:
<html>
<หัว>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>เอกสารที่ไม่มีชื่อ</title>
<style type="text/css">
-
*{font-size:12px;font-family:Verdana, เจนีวา, sans-serif;line-height:14px}
ก{สี:#039}
a:โฮเวอร์{สี:#f60}
.pop{position:absolute;left:40%;top:40%;width:300px;height:100px;พื้นหลัง:#eee;border:1px solid #ccc}
.pop_head{ตำแหน่ง:ญาติ;ความสูง:20px;พื้นหลัง:#ccc}
.pop_head a{ตำแหน่ง:สัมบูรณ์;ขวา:8px;line-height:20px;สี:#000;การตกแต่งข้อความ:none}
.pop_head a:hover{color:#f60;ข้อความตกแต่ง:none}
.pop_body{ช่องว่างภายใน:8px}
-
</สไตล์>
</หัว>
<ร่างกาย>
<!--ขั้นแรกให้ตั้งค่าเลเยอร์:-->
<div id="pop" style="display:none" onclick="show(event,'pop');">
<div><a href="javascript:void(0);" onclick="hide('pop')">ปิด</a></div>
<div>ขอบคุณที่เยี่ยมชม...</div>
</div>
<!--ปุ่มของเลเยอร์ป๊อปอัป:-->
<a href="javascript:void(0);" onclick="show( event ,'pop');"> ปุ่มป๊อปอัพ</a>
<script type="text/javascript">
var url = '#';
ฟังก์ชั่นแสดง (evt, o) {
evt.stopPropagation?evt.stopPropagation():evt.cancelBubble=true;
var o = document.getElementById(o);
o.style.display = "";
-
ฟังก์ชั่นซ่อน (o) {
var o = document.getElementById(o);
o.style.display = "ไม่มี";
window.location = url;
-
document.onclick=function(){ซ่อน('ป๊อป');}
</สคริปต์>
</ร่างกาย>
</html>
สรุป:
1. เมื่อเรียกใช้เมธอดป๊อปอัป ให้ส่งผ่านวัตถุเหตุการณ์: event
2. เพิ่มโค้ดการผูกเหตุการณ์ลงในวิธีป๊อปอัป
3. จำเป็นต้องมีโค้ด global js ที่ใช้ในการเรียกวิธีการซ่อนเลเยอร์ป๊อปอัปเมื่อคลิกที่ส่วนอื่น ๆ