2016-04-29 93 views
1

我知道这是一个常见问题,但如果包含CSS3,则添加body.modal-open {overflow:hidden;}来解决此问题的解决方案(如post中所述)将不起作用。当打开模式并包含CSS3时,防止滚动滚动

  • 例如,参见这个bootply,其中可以滚动身体。
  • 不包括CSS3的相同示例 - >bootply。标准解决方案完美运作。

当打开模式并包含CSS3时,如何防止滚动滚动?

+0

可以这个答案http://stackoverflow.com/a/9280412/1098851帮助? (请参阅演示) – fcalderan

+0

是的,打开模式时,将'noscroll'类添加到主体可修复问题。 http://www.bootply.com/Q1cqaJTGdF – d4rty

回答

2

添加类noscroll的身体时,模式是开放的,解决了这个问题。

JS:

$("#myModal").on("show", function() { 
    $("body").addClass("noscroll"); 
}).on("hidden", function() { 
    $("body").removeClass("noscroll") 
}); 

CSS:

.noscroll { overflow: hidden; } 

参见bootply

0

可以在模式的开放回调使用

$('html, body').css('overflow', 'hidden'); 

,并恢复它的OnClose

+0

你试过了吗?因为我的示例中的css规则完全是这样,它不起作用。 – d4rty

+0

这将工作。在你的例子中,你有''{{overflow-x:hidden}''这不适用于垂直 – Ardian

+0

但是这两个例子都有'overflow:hidden'?! – d4rty