當響應菜單打開時，在Bootstrap 3網站中覆蓋內容區域

Question

當某人打開導航堆疊菜單時，如何在覆蓋Bootstrap 3網站的內容區域時使用半透明[50％alpha覆蓋率在電話上查看[即只爲@media（max-width：767px）]

這甚至可能與CSS或我將不得不使用一些jQuery？

UPDATE

謝謝你們 - 你們提供的線索，我落得這樣做是：

$(".navbar-toggle").click(function(){ 
$("<div class='overlay'></div>").appendTo($(".content, .footer").css("position", "relative")); 
}) 

// and some css 

/* navigation overlay */ 
div.overlay { 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    top: 0; 
    left: 0; 
    background: rgba(0,0,0,0.5); 
    } 

Answer 1

我沒有測試它，但也許這樣的事情？

JS

$(".navbar-toggle").click(function(){ 
    $("body").toggleClass("nav-open") 
}) 

CSS

@media (max-width: 767px) { 
    body.nav-open:after { 
    content: ''; 
    display: block; 
    position: fixed; 
    top: 0; bottom: 0; left: 0; right: 0; 
    width: 100%; 
    height: 100%; 
    z-index: 10000; 
    background: rgba(0,0,0,0.5); 
    } 
}