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

时间：2011-02-03 14:27:05

标签： jquery jquery-ui

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

注意：我确实希望在对话框

中启用滚动

16 个答案:

答案 0 :(得分：69)

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

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

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

答案 1 :(得分：48)

我需要做同样的事情，只需在身体上添加一个类：

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

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

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

答案 2 :(得分：26)

JS Bin reference for CSS overflow

简单地添加

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

到显示模态的功能。

并且

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

到关闭模式的功能。

答案 3 :(得分：7)

使用上面的JasCav（these functions）答案中引用的函数，我可以提出解决此问题的最佳方法（我遇到了同样的问题）：

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

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

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

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

答案 4 :(得分：6)

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

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

答案 5 :(得分：5)

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

看看this answer，了解这是如何完成的。您可以在create event上调用这些函数，并在close上将所有内容恢复正常。

答案 6 :(得分：2)

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

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

这看起来效果很好

答案 7 :(得分：2)

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

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

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

答案 8 :(得分：2)

只是对你在上面由异教徒发布的答案进行了修改

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

直到我添加了html，浏览器滚动才被禁用。

.stop-scrolling {
  overflow: hidden;
}

通过消除高度：100％，消除了从上到下的效果。

在Chrome，Firefox和Safari上进行了测试。

答案 9 :(得分：1)

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

html { overflow-y: scroll; }

答案 10 :(得分：1)

create: event第一次加载页面时，滚动条会消失 我用open:更改它，现在像魅力一样工作

答案 11 :(得分：1)

创建此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：并关闭：要调用其他函数，只需在适当的位置添加addClass和removeClass行。

答案 12 :(得分：1)

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

答案 13 :(得分：0)

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

$(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)

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

body.modal开，
.modal-open .navbar-fixed-top，
.modal-open .navbar-fixed-bottom {
  保证金权利：15px;
}

到

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

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

答案 15 :(得分：-3)

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

相关问题
最新问题