如何在使用twitter-bootstrap popover时使背景体覆盖？

Question

目前我使用了这个twitter-bootstrap popover：

<button type="button" class="btn btn-default" style="margin-top:11px; padding-bottom:4px; padding-top:4px;" data-container="body" data-toggle="popover" data-trigger="focus"  data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
              Upgrade

输出：

如何使背景叠加像bootstrap模式？我的预期输出

我使用这个jquery来弹出

$(function(){
        $('[data-toggle="popover"]').popover({
            placement : 'bottom'
        });
});

Answer 1

发布更多代码会很不错。

这应该有效。使用一些jQuery或AngularJs或任何其他框架使 .overlay 最初隐藏，然后在需要时使其可见。 如果您需要帮助，请发表评论。

如果有帮助，请+1。

修改

$(function() {
  $('[data-toggle="popover"]').popover({
    placement: 'bottom'
  });
  $("#buttonright").click(function() {
    $("div.overlay").toggleClass("on");
  });
});

.overlay {
  position: relative;
  background-color: rgba(0, 0, 0, 0);
}
.overlay.on {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 10;
}
button {
  margin-top: 11px;
  padding-bottom: 4px;
  padding-top: 4px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<div class="overlay">
  <button id="buttonright" type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-trigger="focus" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Upgrade</button>
</div>

这是包含完整代码和行为的新代码段。

Answer 2

而不是绑定到click事件，如果在click按钮触发器上有多个弹出窗口，则可能会出现问题。使用引导显示和隐藏方法来显示叠加层。

下面是一个示例：

   $(function(){
    $("[data-toggle=popover]").popover({
        html : true,
        template: '<div class="popover extra" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>',
        content: function() {
          var content = $(this).attr("data-popover-content");
          return $(content).children(".popover-body").html();
        },
        title: function() {
          var title = $(this).attr("data-popover-content");
          return $(title).children(".popover-heading").html();
        }
    }).on('show.bs.popover', function() {
    $( "body" ).append( "<div class='overlay'></div>" );
      console.log("done");
    }).on('hide.bs.popover', function() {
    $( ".overlay" ).remove();
    })
    
});
    body {
    padding: 100px;
}
.popoverss {
  position: absolute;
background-color: red;
}
.overlay {
position: fixed;
left:0;
top: 0;
width: 100%;
height: 100%;
background-color: rgb(0 0 0 / 42%);
z-index: 90;
}

http://jsfiddle.net/bakersingh/7j0bxyd1/2/