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

Question

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

Jquery: Закрыть Off-Canvas меню и перейдите к Якорь код города Ссылка:

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

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

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

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

Fiddle of issue

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} 

Answer 1

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

• если ширина окна больше, чем 992, на навигационной кнопки мыши оверлей не будет показан
• если ширина окна меньше или равны, то 992, он будет работать, как это должно

См JQuery код здесь:

// simulate modal opening 
 
$('.nav-link').click(function(e) { 
 
    if ($(window).width() > 992) { 
 
    $('.backdrop').hide(0, false); 
 
    } 
 
    
 
\t $('#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'); 
 
});

Answer 2

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

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