CSS 부트 스트랩 jquery 모달에서 모달 배경 밖에 요소 노출

Question

CSS 부트 스트랩의 모달 기능을 사용하고 있으며 완벽하게 작동합니다. 그러나 모달 대화 상자가 열려 있고 나머지 웹 페이지가 .modal-backdrop으로 덮여있는 동안 페이지 구조의 범위 내에서 다른 위치의 외부 요소 중 하나가 될 수있는 기능을 추가하고 싶습니다. 배경으로 상단에 노출 :

위 내 현재 시도에서 볼 수 있듯이

<div id="outside-element"> 
    I want this element exposed even while the modal is active, 
    upon clicking the button in the modal dialog box 
</div> 

<div id="help-box" class="modal fade" data-backdrop="static" data-keyboard="false" data-show="true" tabindex="-1" role="dialog" aria-labelledby="help-label" aria-hidden="true"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="modal-body"> 
       Click this button to show the outside element: 
       <button type="button" class="btn" aria-hidden="true" id="test-item">Click it!</button> 
      </div> 
     </div> 
    </div> 
</div> 

<script type="text/javascript"> 
    (function($) { 
    $('#test-item').click(function() { 
     $('#outside-element').attr('style','zIndex:1041'); 
    }); 
    })(jQuery); 
</script> 

, 나는 .modal - 배경 설정보다 하나 더 높은 1041에 외부 요소의 z 인덱스를하고 있어요 (1040). 이것은 코드가 건전하고 "일하는"(즉, Z- 인덱스를 명확하게 수정하는) 경우에도 내가 원하는 (즉, 모달 배경 위에 # 요소를 배치하는) 것은 아닙니다.

Answer 1

우리가 실행할 수있는 방식으로 코드를 보여주고 무슨 일이 벌어지는 지 알아 보려면 위대할 수 있습니다.

당신은 Z- 색인 효과를 적용하려면, 요소의 위치를 ​​포함해야합니다

#outside-element { 
    position: relative; 
    z-index: 1041; 
} 

Answer 2

.modal-배경 1040의 Z-인덱스가를하지만, .modal 자체 (# help-box)의 Z- 인덱스는 1050입니다. 따라서 외부 요소가 배경 앞에있는 및의 앞에 있어야하는 경우 Z- 색인에 1051을 지정해야합니다. 1041.

배경막 앞에 있어야하지만 대화 상자와 겹치지 않는 경우, 1041의 z- 색인이 작동해야하지만, @uapuap ment 예를 들어 position: relative과 같은 위치를 지정해야합니다. 내가 대답이있을 기다리고 있었다 추측

http://jsfiddle.net/fgyja20w/