Question

当 popover消失时，如何显示背景 popover 并且背景消失了？

＆＃13;

$(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');
  });
});

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

注意：

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

Answer 1

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

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

问题在于固定元素（背景）与静态元素的关系。由于您没有为按钮设置位置值，因此默认设置为static，因此将其设置为 relative 将排序问题。另请注意 z-index ，但在这种情况下， z-index 已经设置。

Answer 2

阅读文章

https://css-tricks.com/dangers-stopping-event-propagation/

我的Jfiddle http://jsfiddle.net/davygxyz/ffezrxL5/

我会检查这是否仍然适用于额外的javascript，现在它可以正常工作。

将此添加到您的代码

$(document).on('click', function(event) {
          if (!$(event.target).closest('.btn-upgrade-premium').length) {
            $('#backdrop').toggleClass('modal-backdrop in');
          }
    });

当popover消失时，我如何能够显示背景并且背景消失了？

2 个答案: