我想让我的身体在使用鼠标滚轮时停止滚动,而我的网站上的Modal(来自http://twitter.github.com/bootstrap)是打开的。
当模式被打开时,我试图调用下面的javascript片段,但没有成功
$(window).scroll(function() { return false; });
AND
$(window).live('scroll', function() { return false; });
请注意,我们的网站放弃了对IE6的支持,IE7+需要兼容。
当你在另一个模态中使用一个模态时,就会发生上述情况。当我在另一个模态中打开一个模态时,后者的关闭将从主体中移除类modal-open。这个问题的解决取决于你如何关闭后一个模式。
如果你用html关闭模态,
<button type="button" class="btn" data-dismiss="modal">Close</button>
然后你必须像这样添加一个监听器,
$(modalSelector).on("hidden.bs.modal", function (event) {
event.stopPropagation();
$("body").addClass("modal-open");
return false;
});
如果你用javascript关闭模态,
$(modalSelector).modal("hide");
然后你必须在一段时间后像这样运行命令,
setInterval(function(){$("body").addClass("modal-open");}, 300);
这个问题已经解决,
解决方案:只需打开bootstrap .css并按以下方式更改
body.modal-open,
.modal-open .navbar-fixed-top,
.modal-open .navbar-fixed-bottom {
margin-right: 15px;
}
to
body.modal-open,
.modal-open .navbar-fixed-top,
.modal-open .navbar-fixed-bottom {
/*margin-right: 15px;*/
}
请查看下面的youtube视频,只有不到3分钟,你的问题将解决…
https://www.youtube.com/watch?v=kX7wPNMob_E
添加类'is-modal-open'或用javascript修改body标签的样式都是可以的,它会像预期的那样工作。但我们要面对的问题是当body变成overflow:hidden时,它会跳到顶部(scrollTop将变成0)。这将在以后成为一个可用性问题。
作为这个问题的解决方案,而不是改变正文标签溢出:隐藏改变它在html标签
$('#myModal').on('shown.bs.modal', function () {
$('html').css('overflow','hidden');
}).on('hidden.bs.modal', function() {
$('html').css('overflow','auto');
});