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

Question

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

注意:我确实希望在对话框内启用滚动

Answer 1

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