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

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

JQUERY: Закрыть меню вне холста и перейти к коду Anchor Link:

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

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

При нажатии на ссылку привязки после ширины 992 пикселя не должно быть черного наложения

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

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

Скрипка вопроса

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="http://www.jasny.net/bootstrap/examples/navmenu-push/">Msrs</a></li>
        <li><a class="nav-link" href="http://www.jasny.net/bootstrap/examples/navmenu-reveal/">Jupiter</a></li>
        <li><a class="nav-link" href="http://www.jasny.net/bootstrap/examples/navbar-offcanvas/">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="http://www.jasny.net/bootstrap/examples/navmenu-push">push effect</a> and <a href="http://www.jasny.net/bootstrap/examples/navmenu-reveal">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}
Источник

2 ответа

Решение

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

  • если ширина окна больше 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');
});

Источник

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

@media (min-width: 992px) {
  .backdrop {
    display: none!important;
  }
}
Источник
Другие вопросы по тегам