부트 스트랩 그리드를 통한 라이트 박스 디스플레이

Question

나만의 라이트 박스를 만들려고합니다.

내 html 파일에 어디에 놓을 지 모르기 때문에 라이트 박스 div이 내 부트 스트랩 그리드 상단에 나타나는 원인을 파악하는 데 어려움을 겪고 있습니다.

<div class="container-fluid content">   
     <div class="row"> 
      <div class="col-md-9"> </div> 

      <div class="col-md-3"> </div> 
     </div> 
    </div> 

이 빛 상자 div입니다 :

내 그리드는 다음과 같습니다

<div id="lightbox"> 
    <p>Click to close</p> 
    <div id="content"> 
     <img src="#" /> 
    </div> 
</div> 

그리고 이것은 라이트 박스 div에 대한 css입니다 :

#lightbox { 
    position:fixed; 
    top:0; 
    left:0; 
    width:100%; 
    height:100%; 
    background-color: rgba(0, 0, 0, .7); 
    text-align:center; 
} 

이벤트가 발생하면 JavaScript를 사용하여 숨기기를 해제합니다. 내 라이트 박스 div. 현재 부트 스트랩 열 위에 표시되지 않고 변경 방법을 모르겠습니다.

Answer 1

Lightbox 스타일링에이 CSS을 추가하여 위에 표시되도록하십시오!

z-index: 9999; 

Answer 2

라이트 박스를 몸통 위쪽에 놓습니다. 스타일이 같은 :

이 예제를 참조하십시오

position:fixed;top:20vw;left:30vh;width:20vh;z-index:999; 

(물론, 모든 상단/왼쪽/너비/높이 값은 당신을 위해 일하는 어떤 있습니다)

:

How to close DOM Window jquery?

Answer 3

다른 대답은 효과가 있지만 z-index에 너무 의존하기 때문에 추적하기가 더 어려울 수 있습니다.

결국 z- 색인을 너무 많이 사용하는 것이 좋습니다. 결과적으로 z- 색인 정의가 너무 많아서 모두 추적 할 수 없기 때문입니다.

모든 DOM 요소는 DOM 마크 업 코드의 위치에 따라 imlicit z- 인덱스를 수신하며, 그 요소는 마지막으로 정의되며 "더 높은"z- 인덱스를가집니다 (명시 적으로 정의되지는 않았지만). 즉, 마크 업 파일의 "하단"에있는 요소는 그 앞에 정의 된 요소의 "위에"나타납니다.

그래서 모든 라이트 박스/모달 유형 요소를 HTML 파일의 끝에 넣어 두는 것이 좋습니다. 즉, 다른 곳에 Z- 색인을 정의하지 않으면 해당 요소가 시각적으로 위에 표시됩니다.

그러나 당신은 또한 부트 스트랩을 사용하고 있습니다. 부트 스트랩은 navbars와 같은 구성 요소에 대해 많은 z- 인덱스를 명시 적으로 정의합니다. 그러나 use Bootstraps modal components 인 경우 부트 스트랩 프레임 워크에 정의 된 최상위 Z- 색인을 상속합니다.

Lightbox 요소를 HTML 파일의 끝에두고 내장 된 modal 구성 요소를 사용하여 부트 스트랩의 표준 Z- 색인을 적용하는 경우 라이트 박스의 안정적인 시각적 계층화를 만들어야합니다.