javascript - 当 popover 出现时如何显示背景，当 popover 消失时背景消失？

Question

当popover 出现 时如何显示背景，而当popover 消失 时如何显示背景？

$(function(){
  var content = '<button class="btn btn-sm btn-default" onclick="location.href=\'/billing/\'">Pay Now</button>&nbsp;<button class="btn btn-sm btn-default " onclick="$(&quot;.btn-upgrade-premium&quot;).popover(&quot;hide&quot;);">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>

注意:

我的问题是即使切换类，背景也不会消失。

Answer 1

只需将 position: relative; 添加到按钮 CSS 样式 .btn-group-sm>.btn, .btn-sm 即可。按钮被 #backdrop 覆盖，这就是您无法点击它的原因。

如果您想覆盖按钮，则可以向背景添加相同的切换功能。

问题是因为fixed 元素(背景)与static 元素的关系。由于您没有为按钮设置 position 值，它的默认值为 static，因此将其设置为 relative 将解决问题。还要注意 z-index，但在这种情况下 z-index 已经设置。