당신이 사진과 화면의 나머지 부분을 볼 페이스 북에

잠겨 배경으로 사진을 집중은 회색, 잠겨 켜고 당신이 그 사진을 닫을 때까지 다른 아무것도 할 수 없습니다. 그 뒤에있는 논리는 무엇입니까? 내 CSS의 일부로 숨겨 놓아야 할 대상입니까? jQuery로 작성된 코드 라인입니까? 이 물건을 치료할 수있는 적절한 방법은 무엇입니까?당신이 사진과 화면의 나머지 부분을 볼 페이스 북에

가 나는 jQuery를 알고 있지만, 생각이 주위에 내 머리를 정리하고 수 없습니다.

출처

2012-03-21 FedeSc

thickbox 또는 lightbox plugin for jQuery 및 other lightbox 및 thickbox projects을 확인해야합니다.

jQuery UI 프레임 워크의 dialog component을 다른 모달 대화 상자 (페이지 위로 이동 가능)로 가져 가십시오. 당신은 데모 페이지를 살펴보고 브라우저 개발 도구에 내장 된 것 사용하는 경우

, 당신은 어떻게 작동하는지 볼 수 있습니다. 다음 CSS와

<div id="TB_overlay" class="TB_overlayBG"></div>

: 예를 들어 Thickbox와 전체 페이지 비활성화 할 수 오버레이의 사업부가

#TB_overlay { 
    position: fixed; 
    z-index: 100; 
    top: 0px; 
    left: 0px; 
    height: 100%; 
    width: 100%; 
}

당신이 볼 수 있듯이을, 문제는 정상에있을 수 (100)의 Z-인덱스가 나머지 부분은 전체 페이지에 걸쳐 있습니다.

#TB_window { 
    position: fixed; 
    z-index: 102; 
    top: 50%; 
    left: 50%; 
    ... 
}

출처

2012-03-21 14:55:15

왜 downvote? –

답변은 크게 확장 되었기 때문에 downvote를 철회하겠습니다.하지만 질문에 대답조차하지 않은 "라이트 박스를 확인하십시오"라는 말 그대로 시작되었습니다. – JJJ

@Juhana : 네 말이 맞아. 나는 그 downvote 후, 감사합니다 깨달았다! –

I 당신은 lightbox 효과를 의미 가정

둘째 오버레이 윈도우 상술 오버레이 앞의 판정 (102)의 Z- 색인 중심

<div id="TB_window" ...></div>

에게 존재 .

그것은 종종 오버레이로 끝났다는 body 요소에 절대적으로 positionned 상대, 폭 100 % 너비와 높이 div에이 오버레이 내부

div.overlay { 
position : absolute; 
top : 0; 
left : 0; 
width : 100%; 
height : 100%; 
}

을, 당신은 예를 들어 당 이미지를 넣어 :

div.overlay img { 
position : absolute; 
top : 50%; 
left : 50%; 
margin-left : /* negative half the width of your image */ 
margin-top: /* negative half the height of your image */ 
}

많은 방법 중 하나 일뿐입니다 (이 방법은 이미지의 크기를 알고있는 경우에만 작동합니다). 종종 센터링은 자바 스크립트를 통해 계산됩니다. 라이트 박스에 대한

검색, 당신은 JQuery와 플러그인 및 자습서의 톤을 찾을 수 있습니다.

출처

2012-03-21 15:00:20 mddw

당신이 사진과 화면의 나머지 부분을 볼 페이스 북에

답변

관련 문제