如何显示popover出现时的背景和popover消失时的背景

How I can show the backdrop when popover appeared and backdrop disappeared when popover disappeared?

本文关键字：背景 popover 何显示 消失 显示      更新时间：2023-09-26

如何在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>

注意：

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

只需将position: relative;添加到按钮CSS样式.btn-group-sm>.btn, .btn-sm中。按钮被#backdrop覆盖，这就是为什么你不能点击它。

如果你想保持按钮被覆盖，那么你可以在背景中添加相同的切换功能。

问题在于固定的元素（背景）与静态的元素之间的关系。由于您没有为按钮设置位置值，默认值为static，因此将其设置为相对将对问题进行排序。还要注意z索引，但在这种情况下，已经设置了z-index。

阅读文章

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

我的小提琴http://jsfiddle.net/davygxyz/ffezrxL5/

我会检查一下这是否仍然适用于额外的javascript，目前它可以工作。

将此添加到您的代码中

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