如何在使用twitter-bootstrap彈出窗口時製作背景主體？

Question

目前我用這個Twitter的引導酥料餅：

<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 

輸出：

我怎樣才能使背景疊加像引導模式？我的預期輸出

我用這個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>

這是完整的代碼和行爲中的片段。