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

当有人打开导航堆叠菜单时，我怎样才能用半透明[50％alpha]覆盖覆盖Bootstrap 3网站的内容区域，只有在手机上查看网站时[即仅用于@media（最大宽度） ：767px）]

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

UPDATE

谢谢你们 – 你提供了线索，我最终做的是：

$(".navbar-toggle").click(function(){ $("
").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); } }