我想在面板上显示一些我需要覆盖的信息,这些信息应该显示在用户引发的事件上.
我在BootPly上创建了一个演示：
单个面板的HTML :(其余部分写在链接中..没有关联到我的问题)
<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> <i class="glyphicon glyphicon-pushpin" data-toggle="tooltip" data-placement="left" title="Show options"></i> <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> <i class=" glyphicon glyphicon-retweet" data-toggle="tooltip" data-placement="left" title="Toggle Chart"></i> </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.85);
z-index: 9999;
color: white;
display: inline-block;
}
JS：
JS的使用是显示和隐藏“.overlay”div
$('.glyphicon-pushpin').click(function () {
$('.overlay').toggle();
});
注意：
请注意,在我给出的链接中,我已经将.panel-body高度硬编码为100px,但实际上它是在运行时调整的.
问题：
点击“显示选项”图标..叠加层遍布div但我希望它保留在’div .panel-body’中
解决方法
请试试这个CSS
.panel-body { height:100px; position:relative; }
