禁用浏览器滚动，而jQuery UI模式对话框打开
是否有可能禁用浏览器中的滚动（只适用于浏览器的滚动条），而jQuery的UI模式对话框是打开的。
注意：我希望在对话框中启用滚动function
您无法完全停用滚动function，但您可以停止使用滚轮和通常执行滚动的button进行滚动。
看看这个答案 ，了解如何完成。 您可以在创build事件中调用这些函数，并在closures时将所有内容恢复正常。
$(formObject).dialog({ create: function(event, ui) { $("body").css({ overflow: 'hidden' }) }, beforeClose: function(event, ui) { $("body").css({ overflow: 'inherit' }) } });
或者正如我在下面的评论中提到的那样：
var dialogActiveClassName="dialog-active"; var dialogContainerSelector="body"; $(formObject).dialog({ create: function(event, ui) { $(dialogContainerSelector).addClass(dialogActiveClassName); }, beforeClose: function(event, ui) { $(dialogContainerSelector).removeClass(dialogActiveClassName); } });
但是说实话，你应该确保创build一个对话框，将一个事件放到你正在监视事件的窗口对象上，大概就像这样：
var dialogActiveClassName="dialog-active"; var dialogContainerSelector="body"; $(window).on("event:dialog-opened", function(){ $(dialogContainerSelector).addClass(dialogActiveClassName); }); $(window).on("event:dialog-closed", function(){ $(dialogContainerSelector).removeClass(dialogActiveClassName); });
我需要做同样的事情，简单地通过添加一个类到身体：
.stop-scrolling { height: 100%; overflow: hidden; }
添加类然后删除当你想重新启用滚动，在IE，FF，Safari和Chrome中testing。
$('body').addClass('stop-scrolling')
JS溢出的CSS Bin参考
只需添加
$('body').css('overflow','hidden');
到你的function， 显示模式 。
和
$('body').css('overflow','scroll');
到你的closures模式的函数。
这里是最好的，我可以拿出解决这个问题（我有同样的问题）使用上面的JasCav（ 这些函数 ）的答案中引用的函数 ：
dialogClass: 'dialog_fixed', create: function(event, ui) { disable_scroll(); // disable while dialog is visible $('#dialog_form').hover( function() { enable_scroll(); }, // mouse over dialog function() { disable_scroll(); } // mouse not over dialog ); }, beforeClose: function(event, ui) { enable_scroll(); // re-enable when dialog is closed },
CSS是：
.dialog_fixed { position:fixed !important; }
它只是保持对话框固定在页面上，这可能是我们不需要了。
这允许鼠标在鼠标hover在对话框上时进行滚动，但当鼠标hover在对话框外时则不会。 不幸的是，当鼠标停留在对话框上时，它仍然会滚动主页面，并且滚动到对话框内的内容的末尾（在IE中马上，在Safari和Firefox中短暂的延迟之后）。 我很想知道如何解决这个问题。
我在Safari 5.1.5，Firefox 12和IE 9中testing了这个function。
停止滚动 ， 调整对话框位置 并将用户返回到他们在closures对话框后查看的部分页面
$('<div/>').dialog({ open : function(event, ui) { $('html').attr('data-scrollTop', $(document).scrollTop()).css('overflow', 'hidden'); $(this).dialog('option','position',{ my: 'center', at: 'center', of: window }); }, close : function(event, ui) { var scrollTop = $('html').css('overflow', 'auto').attr('data-scrollTop') || 0; if( scrollTop ) $('html').scrollTop( scrollTop ).attr('data-scrollTop',''); } });
旧post，但我做到这一点的方式是：
open: function(event, ui) { $('html').css('overflow', 'hidden'); $('.ui-widget-overlay').width($(".ui-widget-overlay").width() + 18); }, close: function(event, ui) { $('html').css('overflow', 'hidden'); }
这似乎很好地工作
search了很长时间。 最后，下面的链接保存我。 希望对他人有帮助。
它使用主体的容器。 滚动对话框不会影响背景容器。
http://coding.abel.nu/2013/02/prevent-page-behind-jquery-ui-dialog-from-scrolling/
试试这个。 它正在使用http://jqueryui.com本身;
html { overflow-y: scroll; }
create: event当第一次加载页面时，使滚动条消失，我用open:改变它open:现在像魅力一样工作
创build这个CSS类：
.stop-scrolling { overflow:hidden; height: 100%; left: 0; -webkit-overflow-scrolling: touch; position: fixed; top: 0; width: 100%; }
然后把这个添加到你的对话init：
$("#foo").dialog({ open: function () { $('body').addClass('stop-scrolling'); }, close: function () { $('body').removeClass('stop-scrolling'); }, // other options });
如果您已经使用open：和close：来调用其他函数，只需在适当的位置添加addClass和removeClass行即可。
popupclosures时避免主体跳转到顶部的更好的解决scheme：
$(document).ready(function(){ var targetNodes = $(".cg-popup"); var MutationObserver = window.MutationObserver || window.WebKitMutationObserver; var myObserver = new MutationObserver (mutationHandler); var obsConfig = { attributes : true, attributeFilter : ['style'] }; // ADD A TARGET NODE TO THE OBESERVER. CAN ONLY ADD ONE NODE AT TIME targetNodes.each ( function () { myObserver.observe (this, obsConfig); } ); function mutationHandler (mutationRecords) { var activate_scroll = true; $(".cg-popup").each(function( index ) { if($(this).css("display") != "none"){ $('html, body').css({'overflow-y': 'hidden', 'height': '100%'}); activate_scroll = false; return; } }); if(activate_scroll){ $('html, body').css({'overflow-y': 'auto', 'height': 'auto'}); } } });
这个问题是固定的，解决scheme：只需打开您的bootstap.css并更改如下
body.modal开，
.modal-open .navbar-fixed-top，
.modal-open .navbar-fixed-bottom {
margin-right：15px;
}
至
body.modal开，
.modal-open .navbar-fixed-top，
.modal-open .navbar-fixed-bottom {
/ margin-right：15px; /
}
请观看下面的youtubevideo只有不到3分钟你的问题将解决… https://www.youtube.com/watch?v=kX7wPNMob_E
这是因为你必须在代码中添加modal: true ; 这阻止了用户与后台交互。
