Question

我正在使用Twitter Bootstrap的模态窗口，我注意到当你滚动时，模态弹出窗口在后台页面移动时保持固定。对于演示，您可以单击以下页面中的“启动演示模式”按钮：

http://getbootstrap.com/2.3.2/javascript.html#modals

如何避免这种情况，让滚动事件控制模态窗口？ Bootstrap提供的选项似乎不包括。

模式弹出窗口是<div> position: fixed，这就是我滚动时保持固定的原因。但是我无法将其设置为其他值，因为它需要保持弹出状态。另外我想如果我将<body>的样式设置为overflow:hidden，则会隐藏滚动条。但这不是我想要的。

Answer 1

$('.modal') 
.on('shown', function(){ 
console.log('show'); 
$('body').css({overflow: 'hidden'}); 
}) 
.on('hidden', function(){ 
$('body').css({overflow: ''}); 
});

Answer 2

您可以根据this answer

在overflow: hidden上添加body.modal-open

Answer 3

我用

解决了这个问题

body{
    position: fixed;
    left: 0px;
    right: 0px;
    /*margin: auto;*/
}

如何避免背景页面滚动？

3 个答案: