Lightbox를 구현할 때 스타일과 행동 분리 JS가 줄어 듭니다.

저자：Eve Cole 업데이트 시간：2025-05-23 13:00:04

[테스트에 참여하는 브라우저 : IE6/IE7/IE8/FF3.5/OP9.6/SF4/Chrome2]

[운영 체제 : Windows]

이 튜토리얼은 Lightbox에서 스타일과 행동을 분리하고 모든 측면에서 JS의 작업을 줄이는 것을 목표로합니다 (전체 화면 폐색, IE6 폐색 선택, 양방향 중심, 고도로 적응 형 컨텐츠 등).

먼저 코드 업로드 :

코드 박스를 실행하십시오

<! 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> <head> <meta http-equiv = content-type content = text/html; charset = utf-8/> <meta name = author content = como/> <link rel = start href = http : //www.14px.com title = home/> <title> 전체 화면 차단, 자동 중심 조명 상자 </title> <style type = text/css>* {margin : 0; 패딩 : 0; } html, body {높이 : 100%; 오버플로 : 숨겨진; 글꼴 : 12px/1.5 Simsun;}. MyPage {Line-Height : 3; 오버플로 : 자동; 너비 : 100%; 높이 : 100%;}. 라이트 박스, .popupcover, .popuppiframe, .popupcomponent {위치 : 절대; 왼쪽 : 0; 상단 : 0; 너비 : 100%; 높이 : 100%;}. popupcomponent {z-index : 2; 디스플레이 : none;}. popuppiframe {display : none; _display : 블록; _filter : alpha (불투명도 = 0);}. 팝 업버 {배경 :#000; 불투명도 : 0.7; *필터 : 알파 (불투명도 = 70);}. lightbox {text-align : center; 오버플로 : 자동;}. lightboxContent {디스플레이 : 인라인-블록; *디스플레이 : 인라인; 줌 : 1; 너비 : 300px; 패딩 : 10px; 배경 : #fff; 테두리 : 5px 고체 #00b4ff; 수직-정상 : 중간;}. LightboxMaxHeight {디스플레이 : 인라인-블록; 수직 정상 : 중간; 높이 : 100%; *높이 : 99.5%; 너비 : 1px; 오버플로 : 숨겨진; 마진-왼쪽 : -1px;}. lightboxwrapper {display : 인라인-블록; *디스플레이 : 인라인; 줌 : 1; Text-Align : Left;}. lightboxClose {color :#f00;}. lightboxSubmit {margin-top : 10px; 패딩 탑 : 5px; 테두리 탑 : 1px solid #ccc;}. lightboxSubmit 입력 {font-size : 12px; 패딩 : 0 10px; 오버플로 : 가시; 마진 : 0 5px;} </style> </head> <body> <div class = popupcomponent id = lightbox> <iframe class = popupcomponent id = lightbox> <iframe class = popupcover> </div class = lightbox> <span class = lightboxMaxHeight> </span <lightboxContent> <lightboxContent> 텍스트는 <br/> </div> <div class = lightboxSubmit> <입력 유형 = 버튼 값 = inclick = hidelayer ( 'lightbox')/> <입력 유형 = 버튼 값 = 버튼 값 = canceclick = hidelayer ( 'lightbox')/</div> </div> </div> <div class = popupcomponent id = iframe class=popupframe></iframe><div class=popupcover></div><div class=lightbox><div class=lightboxcontent><div class=lightboxwrapper>When the content has exceeded the height of one screen when the content has exceeded the height of one screen when the content has exceeded the height of one screen when the content has exceeded the height of one screen when the content has exceeded the height of one screen when the content has 콘텐츠가 한 화면의 높이를 초과했을 때 한 화면의 높이를 초과했을 때 콘텐츠가 한 화면의 높이를 초과했을 때 한 화면의 높이를 초과했을 때 콘텐츠가 한 화면의 높이를 초과했을 때 콘텐츠가 한 화면의 높이를 초과했을 때 콘텐츠가 한 화면의 높이를 초과했을 때 콘텐츠의 높이가 한 화면의 높이를 초과했을 때 콘텐츠의 높이를 초과했을 때 콘텐츠의 높이를 초과했을 때 한 화면의 높이를 초과했을 때 한 화면의 높이를 초과했을 때 한 화면의 높이를 초과했을 때 한 화면의 높이를 초과했을 때 한 화면의 높이를 초과했을 때 한 화면의 높이를 초과했을 때 한 화면의 높이가 한 화면의 높이를 초과했을 때 한 화면의 높이를 초과했습니다. 콘텐츠가 한 화면의 높이를 초과하면 콘텐츠가 한 화면의 높이를 초과했습니다. 콘텐츠가 한 화면의 높이를 초과했을 때 한 화면의 높이를 초과했습니다. /> 컨텐츠가 한 화면의 높이를 초과했을 때 콘텐츠가 한 화면의 높이를 초과했을 때 콘텐츠가 한 화면의 높이를 초과하면 콘텐츠가 한 화면의 높이를 초과했을 때 한 화면의 높이를 초과했을 때 한 화면의 높이를 초과했습니다. <br /> 컨텐츠가 한 화면의 높이를 초과했을 때 콘텐츠가 한 화면의 높이를 초과했을 때 컨텐츠가 한 화면의 높이를 초과했을 때 콘텐츠가 한 화면의 높이를 초과했을 때 한 화면의 높이를 초과했을 때 한 화면의 높이를 초과 할 때. <br /> 콘텐츠가 한 화면의 높이를 초과했을 때 콘텐츠가 한 화면의 높이를 초과했을 때 콘텐츠가 한 화면의 높이를 초과했을 때 콘텐츠가 한 화면 높이를 초과했을 때 콘텐츠가 한 화면의 높이를 초과했을 때 콘텐츠가 한 화면의 높이를 초과했을 때 콘텐츠가 한 화면의 높이를 초과했을 때 콘텐츠가 한 화면의 높이를 초과했을 때 콘텐츠가 한 화면의 높이를 초과했을 때 한 화면의 높이를 초과했을 때 한 화면의 높이를 초과하면 한 화면의 높이를 초과 할 때 한 화면의 높이를 초과 할 때 한 화면의 높이를 초과 할 때 한 화면의 높이를 초과했습니다. <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 class = lightboxSubmit> <input type = button value = onclick = hidelayer ( 'lightbox2')/> <입력 유형 = button value = cance onclick = hidelayer ( 'lightbox2')/> </div> </div> <span class = lightboxHeight> </div class = myPage> myPage> 풍부한 내용 <br /> 풍부한 내용 <br /> 풍부한 콘텐츠 <br /> 풍부한 콘텐츠 가장지 척하는 <br /> <div 스타일 = 텍스트-알림 : 센터;> <입력 유형 = 버튼 값 = 버튼 버튼 onclick = showlayer ( 'lightbox') /> < /div> 부유 한 콘텐츠 <br /> Richent <br /> pretending richent <br /> /> 풍부한 콘텐츠를 겪고있는 부유 한 내용 <br /> 풍부한 내용 <br /> 풍부한 콘텐츠 <br /> 풍부한 내용 <br /> 풍부한 내용 <br /> 척하는 풍부한 내용 <br /> 척하는 풍부한 내용 <br /> 척하는 풍부한 내용 <br /> <div style = text-align : center;> <입력 유형 = 버튼 값 = 버튼 onclick = showlayer ( 'lightbox') /> rich ancontence <br /> pretenning /> 풍부한 내용물 <br /> 풍부한 콘텐츠 <br /> 풍부한 콘텐츠 <br /> 풍부한 내용 <br /> 풍부한 내용 <br /> 척하는 풍부한 내용 <br /> 척하는 풍부한 내용 <br />> 척하는 풍부한 내용 <br /> <select> <emplion> e6을 테스트 할 수 있는지 여부를 테스트 할 수 있는지 < /옵션> <br />가 풍부한 <br /> rich /> rich /> freated in rich /rectended in rich on freated in rich in rich in rich in rich in rich in rich in rich in rich in rich in rich in a testing <br /select> 내용 <br />는 내용이 풍부한 척하는 척도 <br /> 내용이 풍부하다고 주장하는 내용이 풍부하다고 주장했다. 컨텐츠가 풍부하다고 주장하는 내용이 풍부하다고 주장했다. 내용이 풍부하다고 주장하는 내용이 풍부하다고 주장했다. /> <select> <pluxce> IE6이 커버 할 수 있는지 테스트하기위한 또 다른 선택 < /옵션> < /select> <br /> 내용이 풍부한 척 <br />은 내용이 풍부한 척 <br /> <div style = 텍스트-정렬 : 중심;> <input value = button onclick = showlayer ( 'light bacts') 컨텐츠 값을 초과 할 때 컨텐츠가 올려진 경우 onclick = showlayer ( 'lightbox2') /> < /div> 내용이 풍부한 척 <br /> 내용이 풍부하다고 주장하는 내용이 풍부하다고 주장하는 내용 <br />은 내용이 풍부하다고 주장하는 내용이 풍부하다고 주장하는 내용이 풍부하다고 <br />가 풍부한 incondent <br />는 <br />가 풍부하다고 주장합니다. />은 내용이 풍부한 척하는 척 <br /> 내용이 풍부한 내용이 풍부하다고 주장하는 내용 <br /> 내용이 풍부하다고 주장하는 내용이 풍부하다고 주장하는 내용이 풍부하다고 주장하는 내용이 풍부하다고 주장하는 내용이 풍부하다고 주장하는 내용이 풍부하다고 주장하는 <br />가 풍부하다고 주장합니다. 내용 <br />은 내용이 풍부한 척하는 척 <br /> 내용이 풍부하다고 주장하는 내용이 풍부하다고 주장하는 내용 <br />은 내용이 풍부하다고 주장하는 내용이 풍부하다고 주장하는 내용이 풍부하다고 주장하는 <br /> incondent <br />가 풍부한 내용 <br />가 풍부하다고 주장한다 내용이 풍부한 내용이 풍부하다고 주장하는 내용이 풍부하다고 주장하는 내용이 풍부하다고 주장하는 내용 <br /> 내용이 풍부하다고 주장하는 내용 <br />은 내용이 풍부하다고 주장 <br />가 풍부한 척 /> < /div> < /div> function showlayer (id) {document. hidelayer (id) {document.getElementByid (id) .style.display = none;} </script> </body> </html>

[Ctrl+A 모든 선택 팁 : 먼저 코드를 수정 한 다음 실행을 누릅니다]

이 Lightbox에는 다음 기능이 있습니다. 코드를 수정하여 테스트 할 수 있습니다 ^- ^:

페이지의 모든 위치를 클릭하면 화면을 완벽하게 덮을 수 있습니다 (현재 스크롤 막대를 포함한 모든 요소를 직접 제어 할 수 없습니다). 선택 요소는 IE6에 숨어 있지 않고 차단 될 수 있습니다 (IFRAME 폐색 방법의 결함 : 차단 후 스크롤 막대가 드래그되면 선택이 여전히 최상위로 이동합니다).
라이트 박스는 내용에 적응할 수 있으며 완벽한 중심 상태를 제시합니다.
내용이 단일 줄 인 경우 중앙에 표시됩니다. 내용이 멀티 라인 인 경우 왼쪽에 표시됩니다. 컨텐츠 높이가 Lightbox가 화면 높이를 초과하면 스크롤 막대가 나타나고 상단에 표시되므로 독자는 전체 그림에서 읽을 수 있습니다.

관심이 있으시면이 라이트 박스를 형성하기위한 다음 팁을 다음을 참조 할 수 있습니다.

1. 전체 화면 음영 방법 :

에이. html/body의 스크롤바를 숨 깁니다.

비. DIV를 마스크로 사용한 다음 DIV를 스크롤 막대가있는 페이지로 사용하고 하나는 상단에 쌓여 있고 하나는 하단에 쌓입니다.

코드 박스를 실행하십시오

[Ctrl+A 모든 선택 팁 : 먼저 코드를 수정 한 다음 실행을 누릅니다]