Question

我正在使用一个插件，该插件具有用于登录的模式弹出框（CM Registration Pro）。我希望背景（我的网站的正文）在模式弹出窗口打开时无法滚动。我已经尝试了以下代码，但无法正常工作

jQuery(document).ready(function ($) {
if($('.cmreg-overlay').length){
    $('html').css('overflow', 'hidden');
} 
});

如果您希望实时查看问题，我的网站是 Redec

Answer 1

就目前而言，您的身体没有背景。如果您不希望在模式框打开时滚动身体，则可以检查是否显示.cmreg-overlay，如果显示，则将overflow:hidden设置为身体。

我将假设只有#menu-item-16137，#menu-item-16194和#menu-item-16195是这样的：

// Prevent the body from scrolling when the modal opens
var x = document.querySelectorAll("#menu-item-16137, #menu-item-16194, #menu-item-16195");
for(var i = 0; i < x.length; i++) {
  x[i].addEventListener("click", function() {
    if($(".cmreg-overlay").style.display != none) {
      document.body.style.overflow = hidden;
    }
  });
}

// Return the body back to scrolling when closing the modal
document.querySelector(".cmreg-overlay").addEventListener("click", function() {
  document.body.style.overflow = "auto";
}

Answer 2

一个可行的快速示例是：-

var element = document.querySelector('body');
element.addEventListener('click',function(){

if(element.classList.contains('.cmreg-overlay-visible')){
   document.documentElement.style.overflow = 'hidden';
}
else{
   document.documentElement.style.overflow = 'visible';
}
});

防止背景滚动在模态框上

2 个答案: