Удалите модальный фон после определенного размера браузера (jasny bootstrap)

Я использую меню jasny bootstrap off-canvas с привязными ссылками, чтобы перейти к разделу january при щелчке. Я добавил решение jquery, чтобы закрыть меню без холста, когда я нажимаю ссылку привязки.

JQUERY: Закрыть меню холста и перейти к привязке Код области ссылки:

$('.navmenu-nav li a').on('click', function(){
   $(".backdrop").hide( 0, function() {});
    $("body").removeClass("bs.offcanvas");});

Проблема. Вышеприведенный код отлично работает под шириной браузера 992px, когда активное меню холста активно, но когда ширина браузера проходит 992px меню холста становится фиксированным левым меню, но черный backdrop все еще появляется, когда я нажимаю на ссылку привязки. Я попытался использовать removeAttr цели данных и передачи данных после 992px ширина без успеха. Я все еще очень новичок в JQuery, и я не могу показаться чтобы понять это.

Что я могу сделать, чтобы предотвратить появление фона при нажатии на ссылку привязки после ширины 992 пикселей?

Бонус: Меню также кажется прыгающим, когда я выбираю привязку после ширины 992px, как я могу предотвратить прыжок, когда меню холста становится фиксированным левым меню?

Скриншот вопроса

Pre-Реквизит:

Bootstrap.min.css
Bootstrap.min.js
Jasny-bootstrap.css
Jasny-bootstrap.js

JQuery

/Close Modal when navigating to anchor   */
$('.navmenu-nav li a').on('click', function(){
   $(".backdrop").hide( 0, function() {});
    $("body").removeClass("bs.offcanvas");

    });
/Simulate Modal Opening */

$(".nav-link").click(function() { $("#navToggle").click() })

$('.navmenu').on('show.bs.offcanvas', function() {
    $('.backdrop').fadeIn();
});

$('.navmenu').on('hide.bs.offcanvas', function() {
    $('.backdrop').fadeOut();
});


/Close Modal on Resize */
$(window).resize(function() {
  if ($(window).width() > 992) {
    $(".backdrop").hide( 0, function() {});
    $("body").removeClass("bs.offcanvas");

 }
});

HTML

<div class="backdrop"></div>

    <div class="navmenu navmenu-default navmenu-fixed-left offcanvas-sm colornav ">
    <a href="#" class="close" data-toggle="offcanvas" data-target=".navmenu">&times;</a>
     <a id="navToggle" class=""><span></span></a>
      <h4 class="navmenu-brand visible-md visible-lg visible-sm visible-xs" href="#">2017</h4>
      <ul class="nav navmenu-nav">
        <li class="active"><a data-toggle="offcanvas" data-target=".navmenu" class="nav-link" href="#january">Enero</a></li>
        <li><a class="nav-link" href="#" onclick="location.href='http://www.jasny.net/bootstrap/examples/navmenu-push/'; return false;">Msrs</a></li>
        <li><a class="nav-link" href="#" onclick="location.href='http://www.jasny.net/bootstrap/examples/navmenu-reveal/'; return false;">Jupiter</a></li>
        <li><a class="nav-link" href="#" onclick="location.href='http://www.jasny.net/bootstrap/examples/navbar-offcanvas/'; return false;">Off canvas navbar</a></li>
      </ul>

    </div>

    <div class="navbar navbar-default navbar-fixed-top navbar-preheader">
      <button type="button" class="navbar-toggle" data-toggle="offcanvas" data-target=".navmenu">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">navbar brand</a>
    </div>

    <div class="container">
      <div class="page-header">
        <h1>Navmenu Template</h1>
      </div>
      <p class="lead">This example shows the navmenu element. If the viewport is <b>less than 992px</b> the menu will be placed the off canvas and will be shown with a slide in effect.</p>
      <p>Also take a look at the examples for a navmenu with <a href="#" onclick="location.href='http://www.jasny.net/bootstrap/examples/navmenu-push'; return false;">push effect</a> and <a href="#" onclick="location.href='http://www.jasny.net/bootstrap/examples/navmenu-reveal'; return false;">reveal effect</a>.</p>
<p class="space"></p>
      <p id="january">sssssssssssssssssssssssssssssssssssssssssssss</p>
    </div><!-- /.container -->

CSS

html, body {
  height: 100%;
}
body {
  padding: 50px 0 0 0;
}

.space {padding-bottom:900px;}

.backdrop {
  background: rgba(0, 0, 0, 0.5);
  position: fixed;
  top: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  z-index: 1040;
  display: none;
}

.navbar-fixed-top {

  background:#fff!important;
}


.navbar {
  display: block;
  text-align: center;
}
.navbar-brand {
  display: inline-block;
  float: none; 
}
.navbar-toggle {
  position: absolute;
  float: left; 
  margin-left: 15px;
}

.container {
  max-width: 100%;
}

@media (min-width: 1px) {
  .navbar-toggle {
    display: block !important; background:none!important;  border:none !important; color:#f90 !important;
  }
}

@media (min-width: 992px) {
  body {
    padding: 30px 0 0 300px;
  }
  .navmenu {
    padding-top: 0; 
  }

.navbar-toggle {display:none!important;}
.close {display:none}


.navmenu-fixed-left {
  z-index:0;
  top: 48px;
  bottom: 0; background:#fff!important;
}

}

    .navbar-default .navbar-toggle .icon-bar{
       background-color:#333;
    }


.close {margin-right:10px; margin-top:10px;}

@media (max-width:991px) {



.navmenu-fixed-left {
  z-index:1050;
  top: 0;
  bottom: 0; background:#fff!important;
}


}

    .backdrop {display:none}

Ответ 1

Я сделал некоторые изменения в вашей скрипке, теперь вы можете проверить это здесь. Думаю, я решил это, и теперь он делает именно то, что вы хотите.

Если ширина окна больше 992, наложение навигации не будет отображаться
Если ширина окна меньше или равна 992, она будет работать как должна

См. здесь код jQuery:

// simulate modal opening
$('.nav-link').click(function(e) {
  if ($(window).width() > 992) {
    $('.backdrop').hide(0, false);
  }
  
	$('#navToggle').click();
});

$('.navmenu').on('show.bs.offcanvas', function() {
  if ($(window).width() <= 992) {
    $('.backdrop').fadeIn();
  }
});

$('.navmenu').on('hide.bs.offcanvas', function() {
  if ($(window).width() <= 992) {
    $('.backdrop').fadeOut();
  }
});


// close modal on resize
$(window).resize(function() {
  if ($(window).width() > 992) {
    $('.backdrop').hide(0, false);
    $('body').removeClass('bs.offcanvas');
  }
});

// switch active navigation link onclick
$('.nav a').on('click', function() {
  $('.nav').find('.active').removeClass('active');
  $(this).parent().addClass('active');
});

// close Modal when navigating to anchor
$('.navmenu-nav li a').on('click', function() {
  $('.backdrop').hide(0, false);
  $('body').removeClass('bs.offcanvas');
});

Ответ 2

Вы можете обратиться к этому только с помощью CSS, используя медиа-запрос и !important, чтобы навязать специфику над встроенным стилем jquery plugin

@media (min-width: 992px) {
  .backdrop {
    display: none!important;
  }
}