jQuery simplemodal禁用滚动
我在页面上滚动内容超过2000像素。
如果用户单击div ，则会在simplemodal窗口中弹出滚动内容。 现在我的客户端希望在模态窗口启动时使原始页面不可滚动。 （当然模态应该仍然是可滚动的。）
它甚至可能吗？
编辑：我已经尝试过你的建议了。 基本上它可以工作，但问题有点复杂：
$(".foReadMoreLink a").click(function(){ if ($('#modalBox').length == 0) $('body').append('') $('body').css({'overflow':'hidden'}); $.post('jquery/loadarticle.php',{id:$(this).attr('id')},function(data){ $('#modalBox').html(data).modal({overlayClose:'true'}); }) return false; });
我在链接上使用return false，因此没有JavaScript的机器人和用户（是的，那是2％）可以打开文章。 使用上面的代码它按预期工作，但在关闭模式后我必须返回滚动条但这段代码不起作用：
$(".foReadMoreLink a").click(function(){ if ($('#modalBox').length == 0) $('body').append('') $('body').css({'overflow':'hidden'}); $.post('jquery/loadarticle.php',{id:$(this).attr('id')},function(data){ $('#modalBox').html(data).modal({onClose:function(){$('body').css({'overflow':'auto'})},overlayClose:'true'}); }) return false; });
在你的脚本中打开你的模态：
$("html,body").css("overflow","hidden");
并关闭：
$("html,body").css("overflow","auto");
（HTML和正文是必需的，因为滚动条附加到浏览器的不同部分，具体取决于您使用的是什么）
打开和关闭滚动条将导致内容移动，叠加层将不再覆盖整个窗口。 这是如何解决它。
var oldBodyMarginRight = $("body").css("margin-right"); $.modal(iframe, { onShow: function () { // Turn off scroll bars to prevent the scroll wheel from affecting the main page. Make sure turning off the scrollbars doesn't shift the position of the content. // This solution works Chrome 12, Firefox 4, IE 7/8/9, and Safari 5. // It turns off the scroll bars, but doesn't prevent the scrolling, in Opera 11 and Safari 5. var body = $("body"); var html = $("html"); var oldBodyOuterWidth = body.outerWidth(true); var oldScrollTop = html.scrollTop(); var newBodyOuterWidth; $("html").css("overflow-y", "hidden"); newBodyOuterWidth = $("body").outerWidth(true); body.css("margin-right", (newBodyOuterWidth - oldBodyOuterWidth + parseInt(oldBodyMarginRight)) + "px"); html.scrollTop(oldScrollTop); // necessary for Firefox $("#simplemodal-overlay").css("width", newBodyOuterWidth + "px") }, onClose: function () { var html = $("html"); var oldScrollTop = html.scrollTop(); // necessary for Firefox. html.css("overflow-y", "").scrollTop(oldScrollTop); $("body").css("margin-right", oldBodyMarginRight); $.modal.close(); } });
使用
overflow:hidden
打开modal dialog时将其应用于页面，并在销毁对话框时将其删除。 这将隐藏您的滚动条。
我发现overflow:hidden不太好，因为如果页面中途滚动，它会隐藏半透明叠加层后面的内容。
我提出了以下相当精细的解决方案。 它以我发现的所有可检测方式禁用滚动。 如果页面仍以某种方式滚动，则将滚动位置直接放回旧位置。
var popupOpened = false; function openPopup() { popupOpened = true; //catch middle mouse click scrolling $(document).bind('mousedown',disableMiddleMouseButtonScrolling); //catch other kinds of scrolling $(document).bind('mousewheel DOMMouseScroll wheel',disableNormalScroll); //catch any other kind of scroll (though the event wont be canceled, the scrolling will be undone) //IE8 needs this to be 'window'! $(window).bind('scroll',disableNormalScroll); $("#layover").css({"opacity" : "0.7"}).fadeIn(); $("#popup").fadeIn(300,function() { //use document here for crossbrowser scrolltop! oldScrollTop = $(document).scrollTop(); }); } function closePopup() { popupOpened = false; $("#layover").fadeOut(); $("#popup").fadeOut(300,function(){ $(document).unbind('mousedown',disableMiddleMouseButtonScrolling); $(document).unbind('mousewheel DOMMouseScroll wheel',disableNormalScroll); $(window).unbind('scroll',disableNormalScroll); }); } function disableMiddleMouseButtonScrolling(e) { if(e.which == 2) { e.preventDefault(); } return false; } function disableNormalScroll(e) { e.preventDefault(); $('html, body').scrollTop(oldScrollTop); return false; }
这个选项就像一个魅力：
document.documentElement.style.overflow = 'hidden';