禁用浏览器滚动,而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 ; 这阻止了用户与后台交互。