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

Question

目前我使用这个 twitter-bootstrap 弹出窗口:

<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");
  });
  $("body").mouseup(function(){ 
      $("div.overlay").removeClass("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>

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