当popover 出现 时如何显示背景,而当popover 消失 时如何显示背景?
$(function(){
var content = '<button class="btn btn-sm btn-default" onclick="location.href=\'/billing/\'">Pay Now</button> <button class="btn btn-sm btn-default " onclick="$(".btn-upgrade-premium").popover("hide");">Activation Code</button>';
$('.btn-upgrade-premium').popover({animation:true, content:content, html:true, placement: 'bottom'});
$('.btn-upgrade-premium').click(function(){
$('#backdrop').toggleClass('modal-backdrop in');
});
});
.btn-upgrade-premium
{
text-shadow: 0px 1px 0px #FFF;
background-image: linear-gradient(to bottom, #FFEEBE 0%, #fec215 100%);
background-repeat: repeat-x;
border-color: #fec215;
z-index: 1052;
}
.btn-upgrade-premium:active
{
background-color: #fec215;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<button type="button" class="btn btn-upgrade-premium btn-sm" style="margin-top:11px; padding-bottom:4px; padding-top:4px;" data-container="body" data-trigger="focus" data-placement="left">
Upgrade to Premium
</button>
<div id="backdrop"></div>
注意:
我的问题是即使切换类,背景也不会消失。
最佳答案
只需将 position: relative;
添加到按钮 CSS 样式 .btn-group-sm>.btn, .btn-sm
即可。按钮被 #backdrop
覆盖,这就是您无法点击它的原因。
如果您想覆盖按钮,则可以向背景添加相同的切换功能。
问题是因为fixed 元素(背景)与static 元素的关系。由于您没有为按钮设置 position 值,它的默认值为 static
,因此将其设置为 relative 将解决问题。还要注意 z-index,但在这种情况下 z-index 已经设置。
关于javascript - 当 popover 出现时如何显示背景,当 popover 消失时背景消失?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30992346/