javascript - 在加载弹出页面时使用 jquery 或 javascript 隐藏背景网页垂直滚动条

Question

通过单击<a>click me</a>标签，弹出窗口将被加载。此时背景页面垂直滚动条处于可见状态。如何在弹出窗口加载时隐藏并在关闭时可见。

我只使用了下面的脚本：

if($("#myModal").is(':visible')){  // here 'myModal' is div of popup.
   $("html").css("overflow", "hidden");  // here 'html' is a background page
   }
   else
  {
   $("html").css("overflow", "visible");
  }

隐藏状态正常工作，但当我关闭弹出窗口时可见状态不起作用。

请给我一个正确的解决方案。

Answer 1

取决于您实现模态的方式...例如，如果您使用的是jQuery UI 对话框小部件，您将执行以下操作：

$("a.mylink").dialog({
    open: function() {
        $("html").css("overflow", "hidden");
    },
    close: function() {
        $("html").css("overflow", "visible");
    }
});