在jQuery UI模式对话框打开时禁用浏览器滚动

is it possible to disable scrolling in browser (just for browser's scrollbars) while a jQuery UI modal dialog is open.

是否可以在jQuery UI模式对话框打开时禁用浏览器中的滚动（仅适用于浏览器的滚动条）。

Note: I do want scrolling to be enabled inside the dialog

注意：我确实希望在对话框中启用滚动

15 个解决方案

#1

You can't disable scrolling completely, but you can stop scrolling with the mouse wheel and the buttons that typically perform scrolling.

您无法完全禁用滚动，但可以使用鼠标滚轮和通常执行滚动的按钮停止滚动。

Take a look at this answer to understand how that is done. You could call these functions on the create event and return everything to normal, on close.

看看这个答案，了解如何做到这一点。您可以在create事件上调用这些函数，并在关闭时将所有内容恢复正常。

#2

$(formObject).dialog({
 create: function(event, ui) {
  $("body").css({ overflow: 'hidden' })
 },
 beforeClose: function(event, ui) {
  $("body").css({ overflow: 'inherit' })
 }
});

Or as I allude to in the comment below:

或者正如我在下面的评论中提到的那样：

var dialogActiveClassName="dialog-active";
var dialogContainerSelector="body";

$(formObject).dialog({
 create: function(event, ui) {
   $(dialogContainerSelector).addClass(dialogActiveClassName);
 },
 beforeClose: function(event, ui) {
   $(dialogContainerSelector).removeClass(dialogActiveClassName);
 }
});

But actually to be honest, you should ensure that creating a dialog bubbles an event up to your window object where you'd be watching for said events, roughly something like this pseudo:

但实际上，老实说，你应该确保创建一个对话框，将事件发送到你正在观察所述事件的窗口对象，大致类似于这样的伪事：

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);
});

#3

I needed to do exactly the same thing, do it simply by adding a class to the body:

我需要做同样的事情，只需在主体中添加一个类就可以了：

.stop-scrolling {
  height: 100%;
  overflow: hidden;
}

Add the class then remove when you want to re-enable scrolling, tested in IE, FF, Safari and Chrome.

添加类然后在要重新启用滚动时删除，在IE，FF，Safari和Chrome中进行测试。

$('body').addClass('stop-scrolling')

#4

JS Bin reference for CSS overflow

用于CSS溢出的JS Bin参考

Simply Add

简单地添加

$('body').css('overflow','hidden');

$（ '主体'），CSS（ '溢出'， '隐藏'）。

to your function that shows the modal.

到显示模态的函数。

And

和

$('body').css('overflow','scroll');

$（ '主体'）的CSS（ '溢出'， '滚动'）;

to your function that closes the modal.

你的函数关闭模态。

#5

Here is the best that I could come up with to solve this issue (I had the same problem) using the functions referenced in the answer by JasCav above (these functions):

这是我能用上面的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
},

the css is:

css是：

.dialog_fixed { position:fixed !important; }

and it just keeps the dialog fixed on the page, which maybe we don't need anymore.

它只是将对话框固定在页面上，这可能我们不再需要了。

This allows mouse scrolling while the mouse is over the dialog, but not when it is outside the dialog. Unfortunately it will still scroll the main page when the mouse is over the dialog and you scroll past the end of the content inside the dialog (in IE right away, in Safari and Firefox after a short delay). I would love to know how to fix this.

这允许鼠标在对话框上滚动时进行鼠标滚动，但在对话框外时不允许滚动。不幸的是，当鼠标悬停在对话框上时，它仍然会滚动主页面，并滚动到对话框内的内容结尾（在IE中，在短暂的延迟后在Safari和Firefox中）。我很想知道如何解决这个问题。

I tested this in Safari 5.1.5, Firefox 12, and IE 9.

我在Safari 5.1.5，Firefox 12和IE 9中进行了测试。

#6

Stops scrolling, adjusts dialog position and returns user to part of page they were viewing after they close the dialog

停止滚动，调整对话框位置，并在关闭对话框后将用户返回到他们正在查看的部分页面

$('<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','');
    }
});

#7

Old post but the way I did it was:

老帖子，但我做的方式是：

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');
}

This seems to work quite nicely

这似乎工作得很好

#8

Searched for a long long time. Finally the follow link saves me. Hope it's helpful to others.

搜索了很长时间。最后，以下链接拯救了我。希望它对其他人有所帮助。

It uses a container for the main body. The scrolling in dialog won't affect the background container.

它使用一个容器作为主体。对话框中的滚动不会影响后台容器。

http://coding.abel.nu/2013/02/prevent-page-behind-jquery-ui-dialog-from-scrolling/

#9

try this one. it being used by http://jqueryui.com itself

试试这个。它被http://jqueryui.com本身使用

html { overflow-y: scroll; }

html {overflow-y：scroll; }

#10

create: event Makes scrollbars disappear when page loading for first time I change it with open: and working now like a charm

create：event第一次加载页面时滚动条消失我用open打开它：现在像魅力一样工作

#11

$(settings.dialogContentselector).dialog({
        autoOpen: false,
        modal: true,
        open: function( event, ui ) {
            $("html").css({ overflow: 'hidden' });
            $("body").css({ overflow: 'hidden' });
        },
        beforeClose: function( event, ui ) {
            $("html").css({ overflow: 'auto' });
            $("body").css({ overflow: 'auto' });
        }
    });

#12

Create this css class:

创建这个css类：

.stop-scrolling {
    overflow:hidden;
    height: 100%;
    left: 0;
    -webkit-overflow-scrolling: touch;
    position: fixed;
    top: 0;
    width: 100%;
}

Then add this to your dialog init:

然后将其添加到对话框init：

$("#foo").dialog({
    open: function () {
        $('body').addClass('stop-scrolling');
    },
    close: function () {
        $('body').removeClass('stop-scrolling');
    },
    // other options
});

If you are already using open: and close: to call other functions, just add the addClass and removeClass lines in the appropriate place.

如果您已经在使用open：和close：来调用其他函数，只需在适当的位置添加addClass和removeClass行。

#13

A better solution avoiding body jumps to top when popup is closed:

当弹出窗口关闭时，避免身体跳到顶部的更好解决方案：

$(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'});
    }
  }
});

#14

-1

This issue is fixed, Solution: Just open your bootstap.css and change as below

此问题已修复，解决方案：只需打开bootstap.css并进行如下更改

body.modal-open,
.modal-open .navbar-fixed-top,
.modal-open .navbar-fixed-bottom {
margin-right: 15px;
}

body.modal-open，.modal-open .navbar-fixed-top，.modal-open .navbar-fixed-bottom {margin-right：15px; }

至

body.modal-open,
.modal-open .navbar-fixed-top,
.modal-open .navbar-fixed-bottom {
/margin-right: 15px;/
}

body.modal-open，.modal-open .navbar-fixed-top，.modal-open .navbar-fixed-bottom {/ margin-right：15px; /}

Please view the below youtube video only less than 3min your issue will fix... https://www.youtube.com/watch?v=kX7wPNMob_E

请查看以下YouTube视频，只需不到3分钟即可解决您的问题... https://www.youtube.com/watch?v=kX7wPNMob_E

#15

-3

It is because you have to add modal: true in your code; this prevent user from interacting with background.

这是因为你必须在你的代码中添加modal：true;这可以防止用户与后台进行交互。

#1