전체 화면이 보호되고 자동으로 중앙에 배치되는 lightBox

저자：Eve Cole 업데이트 시간：2009-07-27 17:14:47

[테스트에 참여한 브라우저: IE6/IE7/IE8/FF3.5/OP9.6/SF4/Chrome2]
[운영 체제: Windows]

이 튜토리얼은 lightBox의 스타일과 동작을 분리하고 다양한 측면(전체 화면 마스킹, ie6의 마스킹 선택, 양방향 센터링, 높이 적응형 콘텐츠 등)에서 JS 작업을 줄이는 것을 목표로 합니다.

먼저 코드는 다음과 같습니다 .

<!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=utf-8" />
<meta name="author" content="Chomo" />
<link rel="start" href=" http://www.14px.com " title="홈" />
<title>전체 화면 차폐, 자동 센터링 라이트박스</title>
<스타일 유형="텍스트/css">
* { 여백:0;
html,body { 높이:100%; 오버플로:숨김; 글꼴:12px/1.5 simsun;}
.myPage { 줄 높이:3; 오버플로:자동; 너비:100%;}
.라이트박스,
.팝업커버,
.popupIframe,
.popupComponent { 위치:절대; 왼쪽:0; 너비:100%;
.popupComponent { z-색인:2; 표시:없음;}
.popupIframe { 디스플레이:없음; _display:block;
.popupCover { 배경:#000; 불투명도:0.7; *filter:alpha(opacity=70);}
.lightBox { 텍스트 정렬:오버플로:자동;}
.lightBoxContent { 디스플레이:인라인; 확대/축소: 1; 너비: 10px; 테두리: 5px 수직 정렬: 중간;
.lightBoxMaxHeight { 디스플레이:인라인-블록; 수직 정렬:중간; 높이:99.5%; 오버플로:숨김:-1px;
.lightBoxWrapper { 디스플레이:인라인 블록; *디스플레이:인라인; 텍스트 정렬:왼쪽;}
.lightBoxClose { 색상:#f00;}
.lightBoxSubmit { margin-top:10px; padding-top:5px; 테두리 상단:1px 솔리드 #ccc;}
.lightBoxSubmit 입력 { 글꼴 크기:12px; 패딩:0 10px; 여백:0 5px;}
</style>
</head>
<본문>
<div class="popupComponent" id="lightBox">
<iframe class="popupIframe"></iframe>
<div class="popupCover"></div>
<div 클래스="lightBox">
<span class="lightBoxMaxHeight"></span>
<div class="lightBoxContent">
<div class="lightBoxWrapper">
프롬프트가 한 줄보다 작을 때 텍스트가 중앙에 배치됩니다.<br />
</div>
<div 클래스="lightBoxSubmit">
<input type="button" value="OK" onclick="hideLayer('lightBox')" />
<input type="button" value="Cancel" onclick="hideLayer('lightBox')" />
</div>
</div>
</div>
</div>
<div class="popupComponent" id="lightBox2">
<iframe class="popupIframe"></iframe>
<div class="popupCover"></div>
<div 클래스="lightBox">
<div class="lightBoxContent">
<div class="lightBoxWrapper">
콘텐츠가 한 화면의 높이를 초과한 경우콘텐츠가 한 화면의 높이를 초과한 경우콘텐츠가 한 화면의 높이를 초과한 경우콘텐츠가 한 화면의 높이를 초과한 경우<br />
콘텐츠가 한 화면의 높이를 초과한 경우콘텐츠가 한 화면의 높이를 초과한 경우콘텐츠가 한 화면의 높이를 초과한 경우콘텐츠가 한 화면의 높이를 초과한 경우<br />
콘텐츠가 한 화면의 높이를 초과한 경우콘텐츠가 한 화면의 높이를 초과한 경우콘텐츠가 한 화면의 높이를 초과한 경우콘텐츠가 한 화면의 높이를 초과한 경우<br />
콘텐츠가 한 화면의 높이를 초과한 경우콘텐츠가 한 화면의 높이를 초과한 경우콘텐츠가 한 화면의 높이를 초과한 경우콘텐츠가 한 화면의 높이를 초과한 경우<br />
콘텐츠가 한 화면의 높이를 초과한 경우콘텐츠가 한 화면의 높이를 초과한 경우콘텐츠가 한 화면의 높이를 초과한 경우콘텐츠가 한 화면의 높이를 초과한 경우<br />
콘텐츠가 한 화면의 높이를 초과한 경우콘텐츠가 한 화면의 높이를 초과한 경우콘텐츠가 한 화면의 높이를 초과한 경우콘텐츠가 한 화면의 높이를 초과한 경우<br />
콘텐츠가 한 화면의 높이를 초과한 경우콘텐츠가 한 화면의 높이를 초과한 경우콘텐츠가 한 화면의 높이를 초과한 경우콘텐츠가 한 화면의 높이를 초과한 경우<br />
콘텐츠가 한 화면의 높이를 초과한 경우콘텐츠가 한 화면의 높이를 초과한 경우콘텐츠가 한 화면의 높이를 초과한 경우콘텐츠가 한 화면의 높이를 초과한 경우<br />
콘텐츠가 한 화면의 높이를 초과한 경우콘텐츠가 한 화면의 높이를 초과한 경우콘텐츠가 한 화면의 높이를 초과한 경우콘텐츠가 한 화면의 높이를 초과한 경우<br />
콘텐츠가 한 화면의 높이를 초과한 경우콘텐츠가 한 화면의 높이를 초과한 경우콘텐츠가 한 화면의 높이를 초과한 경우콘텐츠가 한 화면의 높이를 초과한 경우<br />
콘텐츠가 한 화면의 높이를 초과한 경우콘텐츠가 한 화면의 높이를 초과한 경우콘텐츠가 한 화면의 높이를 초과한 경우콘텐츠가 한 화면의 높이를 초과한 경우<br />
콘텐츠가 한 화면의 높이를 초과한 경우콘텐츠가 한 화면의 높이를 초과한 경우콘텐츠가 한 화면의 높이를 초과한 경우콘텐츠가 한 화면의 높이를 초과한 경우<br />
콘텐츠가 한 화면의 높이를 초과한 경우콘텐츠가 한 화면의 높이를 초과한 경우콘텐츠가 한 화면의 높이를 초과한 경우콘텐츠가 한 화면의 높이를 초과한 경우<br />
콘텐츠가 한 화면의 높이를 초과한 경우콘텐츠가 한 화면의 높이를 초과한 경우콘텐츠가 한 화면의 높이를 초과한 경우콘텐츠가 한 화면의 높이를 초과한 경우<br />
콘텐츠가 한 화면의 높이를 초과한 경우콘텐츠가 한 화면의 높이를 초과한 경우콘텐츠가 한 화면의 높이를 초과한 경우콘텐츠가 한 화면의 높이를 초과한 경우<br />
콘텐츠가 한 화면의 높이를 초과한 경우콘텐츠가 한 화면의 높이를 초과한 경우콘텐츠가 한 화면의 높이를 초과한 경우콘텐츠가 한 화면의 높이를 초과한 경우<br />
콘텐츠가 한 화면의 높이를 초과한 경우콘텐츠가 한 화면의 높이를 초과한 경우콘텐츠가 한 화면의 높이를 초과한 경우콘텐츠가 한 화면의 높이를 초과한 경우<br />
콘텐츠가 한 화면의 높이를 초과한 경우콘텐츠가 한 화면의 높이를 초과한 경우콘텐츠가 한 화면의 높이를 초과한 경우콘텐츠가 한 화면의 높이를 초과한 경우<br />
콘텐츠가 한 화면의 높이를 초과한 경우콘텐츠가 한 화면의 높이를 초과한 경우콘텐츠가 한 화면의 높이를 초과한 경우콘텐츠가 한 화면의 높이를 초과한 경우<br />
콘텐츠가 한 화면의 높이를 초과한 경우콘텐츠가 한 화면의 높이를 초과한 경우콘텐츠가 한 화면의 높이를 초과한 경우콘텐츠가 한 화면의 높이를 초과한 경우<br />
콘텐츠가 한 화면의 높이를 초과한 경우콘텐츠가 한 화면의 높이를 초과한 경우콘텐츠가 한 화면의 높이를 초과한 경우콘텐츠가 한 화면의 높이를 초과한 경우<br />
콘텐츠가 한 화면의 높이를 초과한 경우콘텐츠가 한 화면의 높이를 초과한 경우콘텐츠가 한 화면의 높이를 초과한 경우콘텐츠가 한 화면의 높이를 초과한 경우<br />
콘텐츠가 한 화면의 높이를 초과한 경우콘텐츠가 한 화면의 높이를 초과한 경우콘텐츠가 한 화면의 높이를 초과한 경우콘텐츠가 한 화면의 높이를 초과한 경우<br />
</div>
<div 클래스="lightBoxSubmit">
<input type="button" value="OK" onclick="hideLayer('lightBox2')" />
<input type="button" value="Cancel" onclick="hideLayer('lightBox2')" />
</div>
</div>
<span class="lightBoxMaxHeight"></span>
</div>
</div>
<div 클래스="myPage">
내용이 풍부한 척<br />내용이 풍부한 척<br />내용이 풍부한 척<br />내용이 풍부한 척<br />
<div style="text-align:center;"><input type="button" value="첫 화면의 버튼" onclick="showLayer('lightBox')" /></div>
내용이 풍부한 척<br />내용이 풍부한 척<br />내용이 풍부한 척<br />내용이 풍부한 척<br />
<select><option>IE6에서 지원되는지 테스트하는 데 사용되는 선택</option></select><br />
내용이 풍부한 척<br />내용이 풍부한 척<br />내용이 풍부한 척<br />내용이 풍부한 척<br />
내용이 풍부한 척<br />내용이 풍부한 척<br />내용이 풍부한 척<br />내용이 풍부한 척<br />
내용이 풍부한 척<br />내용이 풍부한 척<br />내용이 풍부한 척<br />내용이 풍부한 척<br />
<select><option>IE6에서 지원되는지 테스트하기 위한 또 다른 선택</option></select><br />
내용이 풍부한 척<br />내용이 풍부한 척<br />내용이 풍부한 척<br />내용이 풍부한 척<br />
<div style="text-align:center;"><input type="button" value="두 번째 화면에 위치한 버튼" onclick="showLayer('lightBox')" /><input type="button" value ="콘텐츠가 한 화면의 높이를 초과한 경우" onclick="showLayer('lightBox2')" /></div>
내용이 풍부한 척<br />내용이 풍부한 척<br />내용이 풍부한 척<br />내용이 풍부한 척<br />
내용이 풍부한 척<br />내용이 풍부한 척<br />내용이 풍부한 척<br />내용이 풍부한 척<br />
내용이 풍부한 척<br />내용이 풍부한 척<br />내용이 풍부한 척<br />내용이 풍부한 척<br />
</div>
<스크립트>
함수 showLayer(id) {
document.getElementById(id).style.display = "차단";
}
함수 hideLayer(id) {
document.getElementById(id).style.display = "없음";
}
</script>
</body>
</html>

이 lightBox는 다음과 같은 특징을 가지고 있습니다. ^-^ 코드를 수정하여 테스트할 수 있습니다.

페이지의 아무 곳이나 클릭하면 화면을 완벽하게 보호할 수 있습니다(현재 스크롤 막대를 포함한 모든 요소는 직접 제어할 수 없습니다). IE6에서는 선택 요소를 숨기지 않고 보호할 수 있습니다(iframe 보호 방법의 결함: 보호 후, 스크롤 막대를 드래그하면 선택 항목이 여전히 맨 위로 이동합니다.
lightBox의 높이는 내용에 맞게 조정되며 완벽하게 중앙에 표시됩니다.
내용이 한 줄이면 중앙에 표시되고, 내용이 여러 줄이면 왼쪽에 표시되며, lightBox가 화면 높이를 초과하면 스크롤 막대가 표시됩니다. 독자가 내용을 완전히 읽을 수 있도록 상단에 표시됩니다.

관심이 있으시면 이 lightBox를 구성하는 다음 팁을 참고하실 수 있습니다.

1. 전체 화면 마스킹 방법:

A. html/body의 스크롤바를 숨깁니다.
B. div를 마스크로 사용한 다음 다른 div를 사용하여 위쪽에 하나, 아래쪽에 하나의 스크롤 막대가 있는 페이지를 만듭니다.