CSS나 jquery로 구현할 수 있는 마스크 레이어 같은 공통 기능은 다들 해보셨을 거라 생각합니다. 구현 방법은 다양합니다. 여기 http://프로젝트에서 구현한 방법 중 일부를 소개하겠습니다. 작동 가능하고 매우 실용적입니다.
효과는 다음과 같습니다.
Node.js 구현 부분:
다음과 같이 코드 코드를 복사합니다.
<스크립트 유형="텍스트/자바스크립트">
var myAlert = document.getElementById("alert");
var reg = document.getElementById("content").getElementsByTagName("a")[0];
reg.onclick = 함수() {
myAlert.style.Background = "#e2ecf5";
myAlert.style.zIndex = "501";
myAlert.style.position = "절대";
var signSpan = document.getElementById("signSpanId");
myAlert.style.top = signSpan.offsetTop;
myAlert.style.left = signSpan.offsetLeft;
mybg = document.createElement("div");
mybg.setAttribute("id", "mybg");
mybg.style.Background = "#000";
mybg.style.width = "100%";
mybg.style.height = "100%";
mybg.style.position = "절대";
mybg.style.top = "0";
mybg.style.left = "0";
mybg.style.zIndex = "500";
mybg.style.opacity = "0.3";
mybg.style.filter = "알파(불투명도=30)";
document.body.appendChild(mybg);
//document.body.style.overflow = "숨김";
}
</script>
페이지 코드:
다음과 같이 코드 코드를 복사합니다.
<!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=gb2312" />
</head>
<본문>
<테이블 정렬="중앙">
<tr>
<td style="글꼴 크기:28px; 글꼴 무게:bold">
<div id="콘텐츠">
<a href="#">
마스크 레이어 활성화
</a>
</div>
</td>
<td 스타일="수직 정렬:상단">
<div id="signSpanId" style="position:absolute;"></div>
<div id="경고" align="top">
<h4>
<스팬>
강조표시된 영역입니다
</span>
</h4>
<p>
<라벨>
사용자 이름
</label>
<입력 유형="텍스트" />
</p>
<p>
<라벨>
비밀번호
</label>
<입력 유형="비밀번호" />
</p>
<p>
<input type="submit" value="등록" />
<입력 유형="재설정" 값="재설정" />
</p>
</div>
</td>
<TD>
<div>나는 세 번째 열입니다</div>
</td>
</tr>
</table>
</body>
</html>