我想在我需要覆盖的面板上显示一些信息,这些信息应该显示在用户引发的事件上。
我在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, 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'
答案 0 :(得分:6)
请试试这个css
.panel-body { height:100px; position:relative; }