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

问题描述

当有人打开nav-stacked菜单时，如果在手机上查看网站，我如何覆盖一个半不透明的[50％alpha]覆盖的Bootstrap 3网站的内容区域。只有@media（max-width：767px）]

How can I overlay the content areas of a Bootstrap 3 site with a semi opaque [50% alpha] overlay when someone opens the nav-stacked menu, only when the site is viewed on a phone [i.e. only for @media (max-width: 767px)]

使用CSS甚至可以使用一些jQuery吗？

Is this even possible with CSS or will I have to use some jQuery?

UPDATE

感谢家人 - 你提供了线索，我最后做的是：

Thanks guys - you provided the clues, what I ended up doing was :

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

推荐答案

，但可能是这样的吗？

I haven't tested it, but maybe something like this?

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);
  }
}

这篇关于当响应菜单打开时，覆盖Bootstrap 3站点中的内容区域的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！