이 장에서는 버튼을 클릭하여 중앙 창을 팝업하는 방법을 소개 하며이 창에는 반투명 마스킹 레이어 효과가 더 인기가 있으며 물론 더 복잡한 구현 방법이 있습니다. . 아래에 소개 된 코드는 단순히이 여동생을 구현할 수 있습니다.
코드는 다음과 같습니다.
코드 사본은 다음과 같습니다.
<! doctype html>
<html>
<헤드>
<meta charset = "utf-8">
<meta name = "author"content = "http://www.softwhy.com/"/>
<title> 개미 부족 </title>
<스타일 유형 = "텍스트/CSS">
#fade {
디스플레이 : 없음;
위치 : 절대;
상단 : 0%;
왼쪽 : 0%;
너비 : 100%;
높이 : 100%;
배경색 : 검은 색;
Z- 인덱스 : 1001;
-Moz-opacity : 0.8;
불투명도 : .80;
필터 : 알파 (불투명도 = 80);
}
#빛{
디스플레이 : 없음;
위치 : 절대;
상단 : 25%;
왼쪽 : 25%;
너비 : 50%;
높이 : 50%;
패딩 : 16px;
테두리 : 3px 솔리드 오렌지;
배경색 : 흰색;
Z- 인덱스 : 1002;
오버플로 : 자동;
}
</스타일>
<script type = "text/javaScript">
Window.onload = function () {
var linkbt = document.getElementById ( "linkbt");
var light = document.getElementById ( 'light');
var fade = document.getElementById ( 'fade');
var closebt = document.getElementById ( "CloseBT");
linkbt.onclick = function () {
light.style.display = '블록';
fade.style.display = '블록';
}
closebt.onclick = function () {
light.style.display = 'none';
fade.style.display = 'none';
}
}
</스크립트>
</head>
<body>
<a href = "javaScript : void (0)"id = "linkbt"> 여기를 클릭하여 창을 열어 </a>
<div id = "light"> <a href = "javaScript : void (0)"id = "closeBt"> 닫기 창 </a> </div>
<div id = "fade" "> </div>
</body>
</html>
위의 코드는 요구 사항을 구현하며 다음은 구현 프로세스를 간략하게 소개합니다.
1. 구현 원리 :
기본적으로 마스크 레이어와 창이 숨겨지고 링크를 클릭하면 창과 마스크 레이어를 표시하고 마스크 층이 반투명 상태로 설정됩니다. 두 요소 모두 절대 포지셔닝을 사용하고 중앙 창의 Z-INDEX 속성 값을 마스크 레이어보다 크게 설정하여 마스크 레이어에서 덮을 수 있습니다. 닫기 버튼을 클릭하면 마스크 레이어와 창이 숨겨 질 수 있으며 원리는 거의 동일합니다.