jquery - 打开响应式菜单时，在 Bootstrap 3 站点中覆盖内容区域

Question

当有人打开导航堆叠菜单时，如何使用半不透明 [50% alpha] 覆盖覆盖 Bootstrap 3 站点的内容区域，仅当在手机上查看站点时 [即仅适用于 @media（最大宽度：767像素）]

这甚至可以使用 CSS 还是我必须使用一些 jQuery？

更新

谢谢大家 - 你提供了线索，我最终做的是：

$(".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);
  }
}