将叠加层附加到 bootstrap 后面的内容 3 移动导航切换

Question

我正在尝试以下 （在 footer.php 内），但没有这样的运气。

脚本：

$(document).ready(function(e) {
    $('.navbar-collapse').click(function(){
$(function() {

    var docHeight = $(document).height();

   $("body").append("<div id='overlay'></div>");

           $("#overlay")
            .height(docHeight)
            .css({
                 'opacity' : 0.7,
                 'position': 'fixed',
                 'top': 0,
                 'left': 0,
                 'background-color': 'black',
                 'width': '100%',
                 'z-index': 5000
              });
        }); 
    });
});

加价：

  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </button>

有关如何在触发和显示导航切换时使背景或所有正文内容淡出或变灰的任何建议 -- 目标是让移动导航不是不透明的，但其他所有内容都是不透明的。为任何指针干杯。 （WordPress 网站） 例如。单击导航 > 导航切换出现 > 主体及其后面和其他地方的所有内容都是 #000 不透明度 .7，而导航切换存在，一旦关闭，恢复到没有不透明度的原始状态。

Answer 1

一个好的开始是将您的 jquery 更改为以下内容：

$(function() {

  var docHeight = $(window).height();
  $('.navbar-collapse').click(function(){
     $("<div id='overlay'>")
      .height(docHeight)
      .css({
           'opacity' : 0.7,
           'position': 'fixed',
           'top': 0,
           'left': 0,
           'background-color': 'black',
           'width': '100%',
           'z-index': 5000
      }).appendTo('body');
  });
  
});

编辑

DEMO

看看这个，主要是 css 但我认为这就是你想要的。

$(function() {
    $('.navbar-toggle').on('click', function() {
        $('body').toggleClass('menu-open');
    })
});

然后 css

body.menu-open:after {
    content: '';
    display: block;
    position: fixed;
    top: 0; bottom: 0; left: 0; right: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    background: rgba(0,0,0,0.7);

}

将叠加层附加到 bootstrap 后面的内容 3 移动导航切换

append overlay to content behind bootstrap 3 mobile nav toggle

javascript

css

jquery

twitter-bootstrap

编辑

DEMO