부트 스트랩 3 : 패널 본문에 오버레이 만들기

Question

사용자 제기 이벤트에 표시해야하는 오버레이가 필요한 패널에 일부 정보를 표시하려고합니다.

나는 BootPly에 데모를 만들었습니다

단일 패널의 HTML : (나머지는 내 질문에 relavent이되지 않 ... 링크로 작성)

<div class="panel panel-primary" style="box-shadow: 5px 5px 2px #888888;"> 
          <div class="panel-heading"> 
           <h3 class="panel-title"> 
            Vehicle Status Comparison <span class="pull-right"><i class="glyphicon glyphicon-fullscreen" 
             data-toggle="tooltip" data-placement="left" title="Show Full Screen"></i>&nbsp; 
             <i class="glyphicon glyphicon-pushpin" data-toggle="tooltip" data-placement="left" 
              title="Show options"></i>&nbsp; <i class="glyphicon glyphicon-info-sign" data-container="body" 
               data-toggle="popover" data-placement="bottom" title="Information" data-content="This is a very useful information. But I do not know what to write here."> 
              </i>&nbsp; <i class=" glyphicon glyphicon-retweet" data-toggle="tooltip" data-placement="left" 
               title="Toggle Chart"></i>&nbsp; </span> 
           </h3> 
          </div> 
          <div class="panel-body"> 
           <div id="c_VehicleStatusFull"> 
           </div> 
           <div class="overlay" style="display: none"> 
           </div> 
          </div> 
</div> 

CSS :

.overlay 
{ 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    background-color: rgba(0, 0, 0, 0.85); 
    z-index: 9999; 
    color: white; 
    display: inline-block; 
} 

JS :

U 자 JS의 자체가 사업부를 표시하고 ".overlay을"숨기는 것입니다

$('.glyphicon-pushpin').click(function() { 
    $('.overlay').toggle(); 
}); 

참고 :

내가 100 픽셀로 .panel-body 높이를 하드 코딩 한, 그이 링크에 내가 준 있습니다 만 실제로는 런타임에 조정됩니다.

문제 : "옵션보기"아이콘을 cliking에

.. 오버레이는 사업부에 걸쳐 퍼져 그러나 나는 'DIV .panel 바디'

Answer 1

내에 있고 싶어한다

이 CSS를 사용하십시오.

.panel-body { height:100px; position:relative; }