이 기사에서는 JS+CSS의 닫기 버튼이있는 DIV 팝업 창을 구현하는 방법에 대해 설명합니다. 참조를 위해 공유하십시오. 특정 구현 방법은 다음과 같습니다.
다음과 같이 코드를 복사하십시오. <html>
<헤드>
<title> js+css는 닫기 버튼 </title>으로 div 팝업 창을 구현합니다
<cript>
함수 잠금 () {
document.all.ly.style.display = "block";
document.all.ly.style.width = document.body.clientWidth;
document.all.ly.style.height = document.body.clientHeight;
document.all.layer2.style.display = 'block';
}
함수 lock_checkform (theform) {
document.all.ly.style.display = 'none'; document.all.layer2.style.display = 'none';
거짓을 반환합니다.
}
</스크립트>
<스타일 유형 = "텍스트/CSS">
<!-
.Style1 {font-size : 12px}
A : 링크 {
색상 : #ffffff;
텍스트 결정 : 없음;
}
A : 방문 {
텍스트 결정 : 없음;
}
A : 호버 {
텍스트 결정 : 없음;
}
A : Active {
텍스트 결정 : 없음;
}
->
</스타일>
<meta http-equiv = "content-type"content = "text/html; charset = gb2312">
</head>
<body>
<p align = "Center">
<input type = "button"value = "popup div"onclick = "locking ()" />
</p>
<div id = "ly"style = "위치 : 절대; 상단 : 0px; 필터 : 알파 (불투명도 = 60); 배경색 : #777;
z- 인덱스 : 2; 왼쪽 : 0px; 디스플레이 : 없음; ">
</div>
<!-플로팅 프레임 워크 시작->
<div id = "layer2"align = "center"style = "위치 : 절대; z-index : 3; 왼쪽 : expression ((document.body.offsetwidth-540)/2); stression ((document.body.offsetheight-170)/10);
배경색 : #fff; 디스플레이 : 없음; ">
<table cellPadding = "0"CellPacing = "0"style = "테두리 : 0 Solid #e7e3e7;
Border-Collapse : 붕괴; ">
<tr>
<td style = "배경색 : #73a2d6; 색상 : #ffff; 패딩 왼쪽 : 4px; 패딩 탑 : 2px;
글꼴 중량 : 대담한; 글꼴 크기 : 12px; "valign ="middle ">
<div align = "right"> <a href = javaScript :; onclick = "lock_checkform (this);"> [close] </a> </div> </td>
</tr>
<tr>
<td align = "center">
</td>
</tr>
</테이블>
</div>
<!-플로팅 프레임 워크 끝->
</body>
</html>
이 기사가 모든 사람의 JavaScript 프로그래밍에 도움이되기를 바랍니다.