jQuery Bootstrap 3：在面板主体上创建叠加层
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21987735/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap 3: Create an overlay on panel-body
提问by writeToBhuwan
I want to display some information on the panel for which I need a overlay which should be displayed on user raised event.
我想在面板上显示一些信息，我需要一个覆盖层，应该在用户引发的事件上显示。
I've created a demo on BootPly:
我在BootPly上创建了一个演示：
HTML of a single panel:(Rest is written in the link.. NOt relavent to my question)
单个面板的 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:
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：
The use of JS is to show and hide the ".overlay" div
JS的用途是显示和隐藏“.overlay”div
$('.glyphicon-pushpin').click(function () {
$('.overlay').toggle();
});
Note:
笔记：
Please note that in the link I've given, I've hardcoded the .panel-bodyheight to 100px but in actual it is adjusted at runtime.
请注意，在我给出的链接中，我将.panel-body高度硬编码为 100 像素，但实际上它是在运行时进行调整的。
Problem:
问题：
On cliking the "Show options" icon.. The overlay is spread all over the div but I want it to stay within 'div .panel-body'
单击“显示选项”图标时。覆盖层遍布整个 div，但我希望它保持在“div .panel-body”内
采纳答案by Nimmi
Please try this css
请试试这个css
.panel-body { height:100px; position:relative; }
