코드 사본은 다음과 같습니다.
<! doctype html public "-// w3c // dtd xhtml 1.0 Transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<헤드>
<meta http-equiv = "content-type"content = "text /html; charset = gbk" />
<title> 제목의 문서 </title>
<스타일 유형 = "텍스트/CSS">
/* 팝업 레이어 스타일*/
HTML, 신체 {높이 : 100%; 여백 : 0px; 글꼴 크기 : 12px;}
.mydiv {
배경색 : #ff6;
테두리 : 1px 고체 #f90;
텍스트 정렬 : 센터;
라인 높이 : 40px;
글꼴 크기 : 12px;
글꼴 중량 : 대담한;
Z- 인덱스 : 99;
너비 : 300px;
높이 : 120px;
왼쪽 : 50%;/*ff IE7*/
상단 : 50%;/*ff IE7*/
마진-왼쪽 : -150px! 중요;/*ff ie7이 값 자체의 절반입니다*/
마진-탑 : -60px! 중요;/*ff ie7이 값은 절반 더 높습니다*/
마진-탑 : 0px;
위치 : 고정! 중요;/*ff ie7*/
위치 : 절대;/*ie6*/
_top : 표현
document.compatmode == 'css1compat')?
DocumentElement.scrolltop + (Document.DocumentELement.ClientHeight-this.offSetheight)/2 :/*IE6*/
document.body.scrolltop + (document.body.clientHeight- this.clientHeight)/2);/*IE5 IE5.5*/
}
.BG {
배경색 : #CCC;
너비 : 100%;
높이 : 100%;
왼쪽 : 0;
상단 : 0;/*ff IE7*/
필터 : 알파 (불투명도 = 50);/*즉*/
불투명도 : 0.5;/*ff*/
z- 인덱스 : 1;
위치 : 고정! 중요;/*ff ie7*/
위치 : 절대;/*ie6*/
_top : 표현
document.compatmode == 'css1compat')?
DocumentElement.scrolltop + (Document.DocumentELement.ClientHeight-this.offSetheight)/2 :/*IE6*/
document.body.scrolltop + (document.body.clientHeight- this.clientHeight)/2);/*IE5 IE5.5*/
}
/*끝*/
</스타일>
<script type = "text/javaScript">
함수 showdiv () {
document.getElementById ( 'popdiv'). style.display = 'block';
document.getElementById ( 'bg'). style.display = 'block';
}
함수 closediv () {
document.getElementById ( 'popdiv'). style.display = 'none';
document.getElementById ( 'bg'). style.display = 'none';
}
</스크립트>
</head>
<body>
<div id = "popdiv"style = "display : none;"> 축하합니다! <br/> 등급은 60 점 <br/>입니다
<a href = "javaScript : closediv ()"> 창을 닫습니다 </a> </div>
<div id = "bg"style = "display : none;"> </div>
<div style = "Padding-top : 20px;">
<input type = "제출"이름 = ""value = "display layer"onclick = "javaScript : showdiv ()" />
</div>
</body>
</html>