다음과 같이 코드 코드를 복사합니다.
<html>
<머리>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>제목 없는 문서</title>
<스타일 유형="텍스트/css">
<!--
*{font-size:12px;font-family:Verdana, Geneva, sans-serif;line-height:14px}
a{색상:#039}
a:hover{color:#f60}
.pop{위치:절대;왼쪽:40%;위:40%;너비:300px;높이:100px;배경:#eee;테두리:1px 솔리드 #ccc}
.pop_head{위치:상대적;높이:20px;배경:#ccc}
.pop_head a{위치:절대;오른쪽:8px;라인 높이:20px;색상:#000;텍스트-장식:없음}
.pop_head a:hover{color:#f60;text-장식:none}
.pop_body{패딩:8px}
-->
</style>
</head>
<본문>
<!--먼저 레이어를 설정합니다:-->
<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>
<스크립트 유형="텍스트/자바스크립트">
var url = '#';
함수 표시(evt,o){
evt.stopPropagation?evt.stopPropagation():evt.cancelBubble=true;
var o = document.getElementById(o);
o.style.display = "";
}
함수 hide(o){
var o = document.getElementById(o);
o.style.display = "없음";
window.location = URL;
}
document.onclick=function(){hide('pop');}
</script>
</body>
</html>
요약:
1. 팝업 메소드 호출 시 이벤트 객체인 event를 전달합니다.
2. 팝업 메소드에 이벤트 바인딩 코드를 추가합니다.
3. 다른 부분 클릭 시 팝업 레이어를 숨기는 메소드를 호출하는데 사용되는 글로벌 js 코드가 필요합니다.