文章/答案/技术大牛

发布

jquery弹出层禁止滚动

基础概念

jQuery 弹出层通常是通过 jQuery 插件或自定义代码实现的，用于在网页上显示额外的信息或功能。弹出层通常会覆盖整个页面，并且可能会阻止用户与页面的其他部分进行交互。

类型

模态弹出层：用户必须与弹出层交互后才能继续操作页面。
非模态弹出层：用户可以同时与弹出层和页面的其他部分进行交互。

应用场景

表单验证：在用户提交表单前进行验证，并显示错误信息。
提示信息：向用户显示一些提示信息或警告。
登录/注册：在不离开当前页面的情况下进行登录或注册。

问题：jQuery 弹出层禁止滚动

原因

当弹出层显示时，通常希望用户只能与弹出层交互，而不能滚动页面的其他部分。这可以通过阻止页面的滚动事件来实现。

解决方法

以下是一个简单的示例代码，展示如何使用 jQuery 禁止页面滚动：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery 弹出层禁止滚动</title>
    <style>
        .popup {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            z-index: 9999;
        }
        .popup.active {
            display: block;
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div class="popup" id="myPopup">
        <div>
            <h2>这是一个弹出层</h2>
            <p>这是一个示例弹出层内容。</p>
            <button id="closePopup">关闭</button>
        </div>
    </div>

    <button id="openPopup">打开弹出层</button>

    <script>
        $(document).ready(function() {
            $('#openPopup').click(function() {
                $('#myPopup').addClass('active');
                $('body').css('overflow', 'hidden');
            });

            $('#closePopup').click(function() {
                $('#myPopup').removeClass('active');
                $('body').css('overflow', 'auto');
            });
        });
    </script>
</body>
</html>

解释

CSS 部分：定义了一个 .popup 类，用于控制弹出层的显示和隐藏。
JavaScript 部分：
- 当点击 #openPopup 按钮时，添加 active 类到 .popup 元素，并设置 body 的 overflow 属性为 hidden，以禁止页面滚动。
- 当点击 #closePopup 按钮时，移除 active 类，并将 body 的 overflow 属性设置为 auto，以恢复页面滚动。

通过这种方式，可以有效地控制弹出层显示时的页面滚动行为。

页面内容是否对你有帮助？

有帮助

没帮助

打开jquery对话框时调整页面大小会导致页面上出现滚动条

、

我正在使用JQuery对话框在我的页面上显示对话框。当我点击按钮时，JQuery对话框弹出，但它也会启用浏览器的滚动条。我的默认页面不显示滚动条，它只在JQuery对话框打开时显示。为了避免在JQuery对话框打开时显示滚动条，我是否需要设置任何对话框属性来禁止在显示对话框时调整网页大小？

浏览 2提问于2011-04-14得票数 0

1回答

如果你向下滚动，就不会在那里

、、

我正在使用jquery创建一个弹出窗口。单击编辑按钮时，将出现一个弹出窗口，并用毯子覆盖其后面的所有内容，给人一种淡出的印象。我试图让它覆盖页面上的所有内容，甚至是那些只有滚动才能看到的内容。

浏览 2提问于2012-05-01得票数 4

回答已采纳

1回答

当网页滚动时，Colorbox不会向下滚动吗？

、、、、

我正在测试一个基于web的应用程序，因为它有一些colorbox或其他一些jquery插件。当我滚动页面时，相应的颜色框或jquery插件弹出窗口应该被滚动，或者它应该停留在它所在的位置。另一个是如果我当前在colorbox弹出窗口上，那么Tab功能应该在弹出窗口的当前元素上。提前谢谢。

浏览 3提问于2014-07-22得票数 1

4回答

如何在Google中使用没有滚动条的window.open

、、

下面的代码打开新窗口，在Firefox、IE和Opera中没有滚动条。var target = 'some url' 在Google 中，新窗口仍然有滚动条

浏览 7提问于2010-01-03得票数 15

回答已采纳

1回答

casperjs滚动弹出层

、、

我有一个“弹出式容器”，在我点击一个链接之前，我必须把它滚动到底部。我想，首先我必须选择元素#tos-popup-container或#tos-scroll，然后“向下滚动”。

浏览 3提问于2016-05-03得票数 0

1回答

React阻止弹出窗口打开时滚动正文

React阻止弹出窗口打开时滚动正文。当弹出的div打开时，我如何禁止背景主体滚动。

浏览 2提问于2021-06-25得票数 2

1回答

如果在移动设备上触摸了滚动组件之外的区域，则弹出窗口中的滚动冻结

、、、、

我有一个包含2个滚动列表的页面:一个在主体中，第二个在弹出窗口中。我使用标准的解决方案来防止当用户滚动弹出窗口中的内容时滚动正文(我使用的解决方案在这里描述为)我在页面上使用了以下代码： <!/

浏览 2提问于2017-01-13得票数 1

2回答

jQuery移动css滚动并单击

、、、、

我正在为智能手机开发一个移动网站，并使用jquery mobile。第一个测试：jquery mobile文档()提供了data-position="fixed“应该禁止隐藏页眉和页脚的信息我做错了什么？

浏览 2提问于2012-03-04得票数 1

回答已采纳

2回答

在给定不断变化的属性的情况下，禁用正文滚动

、、、、

所以我做了一个弹出窗口，在我的网站上显示一些信息，但我用固定的尺寸来使它适合特定的方式。这意味着有一个滚动条，你需要在弹出窗口上滚动，这很好，我的问题是，当你点击弹出窗口的底部时，它开始在实际页面上滚动。$(document).ready(function(){ $

浏览 2提问于2013-05-20得票数 2

1回答

防止Xamarin.Forms母版页滑出单个控件

、、、

</Grid></ContentPage.Content> 在iOS上，只有当我先向右滚动(以激活ScrollView)时，滚动视图才会向左滚动；否则，向左滚动将被识别为滑动手势，以使主弹出按钮可见。有没有办法禁止滑动手势在ScrollView上显示母版页？当此滑动手势发生时，页面的其余部分应显示主控形状。

浏览 3提问于2017-04-11得票数 2

1回答

如何在滚动页面时突出显示菜单？

、、

我想在滚动页面的同时突出显示菜单。正如我们所知，有很多关于这方面的教程。现在的问题是，Blazor服务器端似乎禁止了一些不能完美运行的JQUERY方法。在上面的教程中，滚动方法从未起作用。你能帮帮我吗？谢谢。

浏览 4提问于2020-07-07得票数 1

回答已采纳

1回答

触摸屏滚动禁用

、、、

通常情况下，页面可以通过触摸滚动，这很好，但现在他们要求我创建一些可移动的弹出式窗口，而这种移动会干扰触摸屏的滚动。有没有办法在弹出窗口在屏幕上时禁止背景滚动？我已经看过以下帖子:显示弹出窗口时防止背景滚动。 $("#p

浏览 1提问于2014-06-19得票数 3

2回答

如何在打开弹出窗口时停止滚动页面

我正在编写jquery弹出窗口。但当我试图用鼠标轮滚动内容时，它就出现了问题。它滚动背景页，同时也滚动。我用过：但是它也停止了弹出内容的滚动。$("body").css("overflow", "hidden"); 它从背景页面中隐藏<e

浏览 1提问于2014-07-15得票数 1

回答已采纳

1回答

拖放对象-从标题中拖动

、、、

我有一个HTML弹出对象我用jQuery把它拖走了。现在，我可以从对象中的任意点拖动这个弹出窗口，这会导致滚动出现问题--如果我试图通过拖动滚动条内的小矩形来滚动--它会拖动整个弹出窗口。我希望仅通过拖动标题就可以拖动弹出窗口--因此，如果拖动标题，它将拖动整个弹出窗口，但我无法从任何其他点(文本区域、白色背景、滚动条.)拖动弹出窗口。

浏览 2提问于2015-08-26得票数 1

回答已采纳

1回答

逻辑xhtml/css设计

、

当我向下滚动时，内容(照片)向上移动，重叠了logo和flickr徽章。有一个简单的解决方案:用纯色覆盖另一个绝对或固定的div，z指数低于logo & flickr徽章，高于照片。因此，如果你向下滚动，图片会在固定的div下消失。然而，这是不可能的，因为我没有固定的背景，正如我之前解释的(超大)。

浏览 1提问于2011-03-09得票数 0

1回答

垂直滚动时禁用FlexSlider交互

、、、、

当用户开始在触摸设备上垂直滚动页面时，我想禁用与滑块的任何交互，特别是当用户在滑块上开始触摸并垂直滑动时。我怎么能这么做？到目前为止，我已经尝试过：在滑块上方放置一层以防

浏览 3提问于2013-09-11得票数 5

3回答

我可以创建一个覆盖层来禁用所有的触摸吗，即使是在菜单上？

、

我需要在场景上显示一个弹出层，创建一个半透明的背景层，也将防止触摸事件传播。我使用的是最新的cocos2d-x v.3.0-alpha-0。使用新的EventDispatcher类可以实现这一点吗？另外，我如何创建一个触摸监听器来阻止所有对主场景的触摸，而不是对弹出窗口的触摸？

浏览 0提问于2013-11-18得票数 2

1回答

Javascript单击函数没有响应

、

我有一个简单的脚本，当弹出div显示时，它会在后台生成层。jQuery(".openForm").click(function() { jQuery("body").append('<divid="layer"></div>');这很好，但是，当我单击某个地方时，它应该用这个脚本关闭

浏览 4提问于2014-01-29得票数 0

回答已采纳

1回答

禁止触摸设备上隐藏层的滚动

我正在制作一个弹出并工作良好的侧导航，但问题是当该窗格出现时(使用translate3d)，当在Chrome中使用iPhone或模拟模式滚动时，它将滚动它后面的<body>，就像我的手指按过该层一样。将出现导航，滚动将锁定到导航窗格，并且不会滚动背景元素。 $('html, bo

浏览 4提问于2014-07-27得票数 3

回答已采纳

2回答

在jQuery、Chrome中有滚动条问题的可拖动弹出窗口

、、、

我已经使用jQuery创建了一个具有滚动条的可拖动弹出窗口。当我使用Chrome点击滚动条时，它会随着鼠标指针移动，直到我右击时才能释放。对于可拖动的弹出窗口，我使用jQuery，例如：这可以在其他浏览器中使用。

浏览 1提问于2011-02-28得票数 2

点击加载更多

jquery弹出层禁止滚动

基础概念

相关优势

类型

应用场景

问题：jQuery 弹出层禁止滚动

原因

解决方法

解释

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐