이 기사에서는 DIV 팝업 Windows를 구현하고 배경을 어둡게하는 JS+CSS 방법에 대해 설명합니다. 참조를 위해 공유하십시오. 특정 구현 방법은 다음과 같습니다.
다음과 같이 코드를 복사하십시오. <html>
<헤드>
<title> JS+CSS DIV 팝업 창의 구현, 배경이 어두워지는 반면 </title>
<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 : 링크 {
색상 : #000;
텍스트 결정 : 없음;
}
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">
<br> <br> <hr> <p align = "center"> <font color = red>이 특수 효과는 인터넷에서 관심과 학습만으로 수집되며 상업적 목적이 아닙니다. 출처 : wulin.com </font> </p>
</td>
</tr>
</테이블>
</div>
<!-플로팅 프레임 워크 끝->
</body>
</html>
이 기사가 모든 사람의 JavaScript 프로그래밍에 도움이되기를 바랍니다.