开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

js+弹框+禁止页面滚动条

在JavaScript中实现弹框并禁止页面滚动条的功能，通常涉及到DOM操作和事件监听。以下是关于这个问题的基础概念、优势、类型、应用场景以及解决方案的详细解释：

基础概念

DOM操作：JavaScript可以通过DOM API来操作网页的结构，包括添加、删除或修改元素。
事件监听：JavaScript可以监听用户的行为事件，如点击、滚动等，并作出相应的反应。
CSS样式：通过修改元素的CSS样式，可以实现禁止页面滚动的效果。

优势

用户体验：弹框可以吸引用户的注意力，提示重要信息或进行交互。
页面控制：禁止页面滚动可以防止用户在弹框显示时误操作，提升用户体验。

类型

模态弹框：需要用户交互后才能关闭的弹框。
非模态弹框：用户可以选择忽略的弹框。

应用场景

提示信息：如登录成功、错误提示等。
确认操作：如删除文件前的确认。
表单验证：在提交表单前显示必填项提示。

解决方案

以下是一个简单的示例代码，展示如何使用JavaScript和CSS实现弹框并禁止页面滚动：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>弹框示例</title>
<style>
  body.no-scroll {
    overflow: hidden;
  }
  .modal {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.4);
  }
  .modal-content {
    background-color: #fefefe;
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
  }
</style>
</head>
<body>

<button id="openModalBtn">打开弹框</button>

<div id="myModal" class="modal">
  <div class="modal-content">
    <p>这是一个弹框</p>
    <button id="closeModalBtn">关闭</button>
  </div>
</div>

<script>
  document.getElementById('openModalBtn').addEventListener('click', function() {
    document.getElementById('myModal').style.display = 'block';
    document.body.classList.add('no-scroll');
  });

  document.getElementById('closeModalBtn').addEventListener('click', function() {
    document.getElementById('myModal').style.display = 'none';
    document.body.classList.remove('no-scroll');
  });

  // 点击弹框外部关闭弹框
  window.addEventListener('click', function(event) {
    if (event.target == document.getElementById('myModal')) {
      document.getElementById('myModal').style.display = 'none';
      document.body.classList.remove('no-scroll');
    }
  });
</script>

</body>
</html>

解释

CSS部分：
- body.no-scroll：通过添加no-scroll类来禁止页面滚动。
- .modal和.modal-content：定义弹框的样式。

JavaScript部分：
- 监听打开弹框按钮的点击事件，显示弹框并添加no-scroll类。
- 监听关闭弹框按钮的点击事件，隐藏弹框并移除no-scroll类。
- 监听窗口的点击事件，如果点击在弹框外部，则关闭弹框并移除no-scroll类。

通过这种方式，你可以实现一个简单的弹框，并在弹框显示时禁止页面滚动。

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

有帮助

没帮助

相关·内容

移动端弹框后禁用页面滑动

在web开发中，有时候我们需要实现在页面上点击某个按钮弹出窗口，并禁用页面滑动或滚动的需求。以下是我本人的做法，望大家多多提出意见或建议。直接上代码：移动端弹框禁止背景滑动滚动条 --> 弹框2"/> 111</...$('#shade').css('display','block'); $('#tankuang').css('display','block'); }); /*关闭弹框

2.4K6 0

jquery - 页面弹框 - 阻止事件冒泡示例

需求编写一个简单的页面弹框的示例，功能要求如下：一个点击按钮，点击可以弹出一个弹框弹框固定出现在页面的中间位置需要写一个背景mask，用于遮掩背景，设置透明度0.3 点击弹框外的位置，弹框就可以消失不见...，可以使用fadeOut() 点击弹框内的文本框可以输入内容，弹框不会消失不见点击弹框右上角的 × 号，则关闭弹框看完了需求，首先快速写好一波html + css 编写基本html + css ?...好了，这里已经实现了点击显示的操作了，那么下一步要编写点击弹框的其他部分，则弹框隐藏。编写点击弹框外部，则隐藏 ?...但是，此时点击弹框内也是会让弹框消失的，那如果我要填写弹框的input框来写内容，还没写就消失了，这该怎么办呢？...最后，编写弹框右上角的× 号，点击则隐藏弹框因为现在点击弹框都不会隐藏，所以可以单独给#close写一个click()方法，设置触发fadeOut()事件。 ?

3.3K1 0

js页面的弹框怎么关闭啊

1、单纯的关闭 window.opener.location.reload(); //刷新父窗口中的网页 window.close();//关闭当前窗窗口 2、...

14.3K4 0

小程序弹框后禁止下面的内容滑动的方法

我们可以使用， catchtouchmove="ture" 属性，来禁止滑动。注意，该属性只支持在真机上测试，模拟器上效果可能无法展示。...只需要在禁止滑动的标签上添加一个 catchtouchmove="ture" 属性即可，代码如下： <view wx:if="{{payOpen}}" class='paySelect' catchtouchmove

2.1K0 0

react离开页面，自定义弹框拦截，路由拦截

前言：项目有个需求是：跳转路由，在离开页面前，需要弹框询问用户是否确定离开。用react-router的组件是可以的，但是，怎么使用antd组件（或者说自定义组件）呢？...medium.com/@michaelchan_13570/using-react-router-v4-prompt-with-custom-modal-component-ca839f5faf39）（4）在离开页面...，路由跳转时，自定义弹框拦截，并询问 handlePrompt = location => { if (!...> 保存完美实现离开页面...，路由拦截的同时，显示自定义模态框！

2.4K1 0

HTML5-JS操作页面滚动条（禁止、隐藏、显示、不显示）

不显示滚动条（css） ::-webkit-scrollbar { width: 0px; } 禁止页面滚动条（js） document.body.parentNode.style.overflowY...= "hidden"; $("body").parent().css("overflow-y","hidden"); 启用浏览器滚动条（js） document.body.parentNode.style.overflowY

10.9K3 0

js页面刷新或关闭时弹框消失_js刷新页面如何保留页面内容

(e){ e.returnValue=("确定离开当前页面吗？")...该事件可用于弹出对话框，提示用户是继续浏览页面还是离开当前页面。对话框默认的提示信息根据不同的浏览器有所不同，标准的信息类似 “确定要离开此页吗？”。该信息不能删除。...但你可以自定义一些消息提示与标准信息一起显示在对话框。注意：在 Firefox 浏览器中，只显示默认提醒信息（不显示自定义信息）。...触发于：关闭浏览器窗口通过地址栏或收藏夹前往其他页面的时候点击返回，前进，刷新，主页其中一个的时候点击一个前往其他页面的url连接的时候调用以下任意一个事件的时候：click，document...当用window open打开一个页面，并把本页的window的名字传给要打开的页面的时候。重新赋予location.href的值的时候。

11.9K4 0

弹窗细节

一、背景锁定与滚动条引起的抖动问题　　浏览网页时经常会发现弹框出现后，滚动鼠标时，蒙版下面的页面还是可以滚动的，其实这些滚动都是没必要的，因为弹框的原意就是要聚焦用户的注意力。...因此我们要做的是 – 背景锁定(从技术角度其实是暂时性干掉滚动条)。...技术原理：当Dialog弹框出现的时候，根元素overflow:hidden. problem：此时，由于页面滚动条从有到无，页面会晃动，这样糟糕的体验显然是不能容忍了，于是，对元素进行处理...，右侧增加一个滚动条宽度（假设宽度是widthScrollbar）的透明边框。...二、避免弹框上再弹出弹框要尽量避免在弹框上再弹一层弹框，2层蒙版会让用户觉得负担很重。可以改用轻量弹框或重新把交互梳理。

2.5K3 0

编写难于测试的代码的5种方式

假设弹框本身有滚动条，页面因为超出一屏又有一个全局滚动条，那整个滚动体验就会变得很差。...弹框特性: – 较页面轻，可以更快回到之前的页面 – 相对独立，可以完全不影响页面的布局 – 适合解决简单，一次性的操作以下列出了一些较适合使用弹框的场景及案例: 1.新手引导第一感觉是非常重要的。...腾讯企点的提示弹框整理几个容易被忽视的弹框细节 1.背景锁定与滚动条引起的抖动问题浏览网页时经常会发现弹框出现后，滚动鼠标时，蒙版下面的页面还是可以滚动的，其实这些滚动都是没必要的，因为弹框的原意就是要聚焦用户的注意力...此时，由于页面滚动条从有到无，页面会晃动，这样糟糕的体验显然是不能容忍了，于是，对元素进行处理，右侧增加一个滚动条宽度（假设宽度是widthScrollbar）的透明边框。...Dialog隐藏的时候再把滚动条放开。 2.避免弹框上再弹出弹框要尽量避免在弹框上再弹一层弹框，2层蒙版会让用户觉得负担很重。可以改用轻量弹框或重新把交互梳理。

1.1K8 0

在设计了100个弹框之后，这些是我的心得

假设弹框本身有滚动条，页面因为超出一屏又有一个全局滚动条，那整个滚动体验就会变得很差。...弹框特性: – 较页面轻，可以更快回到之前的页面 – 相对独立，可以完全不影响页面的布局 – 适合解决简单，一次性的操作以下列出了一些较适合使用弹框的场景及案例: 1.新手引导第一感觉是非常重要的。...腾讯企点的提示弹框整理几个容易被忽视的弹框细节 1.背景锁定与滚动条引起的抖动问题浏览网页时经常会发现弹框出现后，滚动鼠标时，蒙版下面的页面还是可以滚动的，其实这些滚动都是没必要的，因为弹框的原意就是要聚焦用户的注意力...此时，由于页面滚动条从有到无，页面会晃动，这样糟糕的体验显然是不能容忍了，于是，对元素进行处理，右侧增加一个滚动条宽度（假设宽度是widthScrollbar）的透明边框。...Dialog隐藏的时候再把滚动条放开。 2.避免弹框上再弹出弹框要尽量避免在弹框上再弹一层弹框，2层蒙版会让用户觉得负担很重。可以改用轻量弹框或重新把交互梳理。

1.6K9 1

100个弹框设计小结

假设弹框本身有滚动条，页面因为超出一屏又有一个全局滚动条，那整个滚动体验就会变得很差。...弹框特性: – 较页面轻，可以更快回到之前的页面 – 相对独立，可以完全不影响页面的布局 – 适合解决简单，一次性的操作以下列出了一些较适合使用弹框的场景及案例: 1.新手引导第一感觉是非常重要的...腾讯企点的提示弹框整理几个容易被忽视的弹框细节 1.背景锁定与滚动条引起的抖动问题浏览网页时经常会发现弹框出现后，滚动鼠标时，蒙版下面的页面还是可以滚动的，其实这些滚动都是没必要的，因为弹框的原意就是要聚焦用户的注意力...此时，由于页面滚动条从有到无，页面会晃动，这样糟糕的体验显然是不能容忍了，于是，对元素进行处理，右侧增加一个滚动条宽度（假设宽度是widthScrollbar）的透明边框。...Dialog隐藏的时候再把滚动条放开。 2.避免弹框上再弹出弹框要尽量避免在弹框上再弹一层弹框，2层蒙版会让用户觉得负担很重。可以改用轻量弹框或重新把交互梳理。

1.8K3 0

滚动穿透的6种解决方案【已自测】

二、body无滚动 + 弹层内部滚动[css-弹框超出滚动|真机有bug] 适用场景需满足以下条件： 1、body最好是一屏、无滚动 2、虽然body内容超出一屏需滚动，但触发弹层出现的按钮在第一屏中...关键代码： JS控制弹窗的交互、body的禁止滚动 ? css添加弹层的超出滚动效果 ? 局限问题：弹层中内容滚动到顶部或底部后，还会连带页面body一起滚动。也就是还会发生穿透效果。...1、（需满足）弹层内容不需要滚动解决方案：当弹层出现的时候不需要再禁掉body的滚动效果了，我们可以从弹层方面入手，阻止弹框的touchmove事件的默认行为。...但是同样的问题是，需要判断滚动到顶部和滚动到底部的时候禁止滚动。否则，就和第二条一样，触碰到上下两端，弹窗可滚动区域的滚动条到了顶部或者底部，依旧穿透到body，使得body跟随弹窗滚动。...问题局限：不好的点就是没有原生滚动条那种效果，一点也不灵动，只能鼠标移动多少、可滚动区域挪动多少。

13.8K3 1

干好这件事，卷死所有同行

主按钮之后的下一步操作弹框级别-关闭弹框刷新数据。页面级别-这里我认为有待探讨，大家可以根据实际情况判别是否需要回到列表页。表单的交互就地编辑、弹窗、抽屉、页面跳转以及新开页面。...弹框和页面如何选择当承载的东西较多，适合分步骤或者大表单时建议新开一个页面，当表单数量不多时，可以用弹框。...私货删除二次确认弹框：需要说明删除信息和影响的情况。弹框：批量选择，且弹框中不再有其他操作。就地确认：不需要过多说明，可简单二次确认。...弹框loading：确定按钮点击后需有loading。表格loading：用表格自带的loading属性。滚动条表格宽度过长- 滚动条最好出现在表格中，不是在页面级别。...弹框过长-滚动条最好出现在弹框中，不是页面级别滚动。避免出现滚动条套娃。好啦以上就是全部啦！还没看表格的可以看看上一篇哦- 一件事让客户成为你的忠实用户！

2.6K1 0

浅议内滚动布局 - 腾讯ISUX

所谓“内滚动布局”，顾名思义就是主滚动条在页面内部的布局，是相对于传统的滚动而言的，例如，下图所示滚动条，是从头部下方开始：传统的页面滚动，基本上是相对于整个浏览器窗体，例如，QQ视频首页...无法滚动的弹出层基本上，是个像样的web2.0网站都会有弹框web组件，一个黑色半透明的overlay层，上面摇曳着弹框面板，例如这样的：对于黑色半透明覆盖层，传统实现是这样的：如果要兼容IE6浏览器...不过这也没什么，对吧，弹框出现时候，页面背景没法滚也挺好的。但是，麻烦的事情是，如果弹框自身高度很高，却又没法滚动呢(浏览器可用高度700像素，弹框有900像素高)？...传统布局下的弹框，如果高度很高，直接设置弹框容器position:absolute就可以愉快地上下翻滚了。但是，在内滚动布局下，弹框根本就不在滚动容器里面，翻滚一说从何谈起？大危机！怎么办！？...基本上，90%+的弹框组件，半透明覆盖层overlay和弹框dialog是两个并列的兄弟关系的独立的元素，这种设计的好处在于overlay组件可以复用。

1.4K3 0

layui弹出框php,layui弹出层怎么使用

: ‘我是标题’, shadeClose: true, content: [‘layer_model.html’,’no’] }); } 基础参数 1. type 类型type: 1, // 0(信息框，...:18px;’] 数组第二项可以写任意css样式； //如果你不想显示标题栏，你可以 title: false 3. content 内容 3.1.如果是页面层layer.open({ type:...3.2.如果是iframe层layer.open({ type: 2, content: ‘http://sentsin.com’ //这里content是一个URL，如果你不想让iframe出现滚动条...当你宽高都要定义时，你可以 area: [‘500px’, ‘300px’] 5. btn 按钮信息框模式时，btn默认是一个确认按钮，其它层类型则默认不显示，加载层和tips层则无效。...){ //右上角关闭回调 //return false 开启该代码可禁止点击该按钮关闭 } }); 6, shade 遮罩即弹层外区域。

7.1K3 0

浅议内滚动布局

所谓“内滚动布局”，顾名思义就是主滚动条在页面内部的布局，是相对于传统的滚动而言的，例如，下图所示滚动条，是从头部下方开始： ?...无法滚动的弹出层基本上，是个像样的web2.0网站都会有弹框web组件，一个黑色半透明的overlay层，上面摇曳着弹框面板，例如这样的： ?...不过这也没什么，对吧，弹框出现时候，页面背景没法滚也挺好的。但是，麻烦的事情是，如果弹框自身高度很高，却又没法滚动呢(浏览器可用高度700像素，弹框有900像素高)？...传统布局下的弹框，如果高度很高，直接设置弹框容器position:absolute就可以愉快地上下翻滚了。但是，在内滚动布局下，弹框根本就不在滚动容器里面，翻滚一说从何谈起？大危机！怎么办！？ ?...基本上，90%+的弹框组件，半透明覆盖层overlay和弹框dialog是两个并列的兄弟关系的独立的元素，这种设计的好处在于overlay组件可以复用。

2.5K5 0

vue操作dom元素的三种方法

--新增数据源弹框--> <!...export default { name: "Index", data(){ return { } }, methods:{ // 点击新增按钮，弹出新增数据源的弹框...$refs.addAlert.style.display = "block"; }, // 点击 × 关闭新增数据源的弹框 closeAddAlert(){ this....20px; margin-top: 17px; cursor: pointer; font-size: 20px; } /*新增数据源弹框...width: 4rem;height: 4rem; background: #2b2c2f; display: none; } /*新增弹框头部

2.5K2 0

浅议内滚动布局

所谓“内滚动布局”，顾名思义就是主滚动条在页面内部的布局，是相对于传统的滚动而言的，例如，下图所示滚动条，是从头部下方开始： ?...无法滚动的弹出层基本上，是个像样的web2.0网站都会有弹框web组件，一个黑色半透明的overlay层，上面摇曳着弹框面板，例如这样的： ?...不过这也没什么，对吧，弹框出现时候，页面背景没法滚也挺好的。但是，麻烦的事情是，如果弹框自身高度很高，却又没法滚动呢(浏览器可用高度700像素，弹框有900像素高)？...传统布局下的弹框，如果高度很高，直接设置弹框容器position:absolute就可以愉快地上下翻滚了。但是，在内滚动布局下，弹框根本就不在滚动容器里面，翻滚一说从何谈起？大危机！怎么办！？ ?...基本上，90%+的弹框组件，半透明覆盖层overlay和弹框dialog是两个并列的兄弟关系的独立的元素，这种设计的好处在于overlay组件可以复用。

1.2K2 0

php layer弹出层更改背景,详解Layer弹出层样式

前言：学习layer弹出框，之前项目是用bootstrap模态框，后来改用layer弹出框，在文章的后面，我会分享项目的一些代码(我自己写的)。...layer如何获取父界面的元素，比如我点击新增按钮，在layer框编辑后提交，是如何关闭当前layer框，额，关闭layer框很简单，但是如何关闭后根据父界面的form表单向后台发起Ajax请求，，刷新信息...你需要在你的页面引入jQuery1.8以上的任意版本，并引入layer.js。...如果是iframe层 */ layer.open({ type: 2, content: ‘http://sentsin.com’ //这里content是一个URL，如果你不想让iframe出现滚动条...当你在页面一打开就要执行弹层时，你最好是将弹层放入ready方法中，如： //页面一打开就执行弹层 layer.ready(function(){ layer.msg(‘很高兴一开场就见到你’);

4K2 0

Vue2.x自定义桌面端弹框组件VLayer

在设计之初参考借鉴了Layer弹框插件、Element-UI、iView等组件化设计思想。快速使用 // 在main.js中引入组件 import VLayer from '....close="xxx"） ------------------------------------------ @@函数式事件 onOpen 打开弹窗回调 onClose 关闭弹窗回调弹框模板...隐藏滚动条避免页面移位参考了饿了么隐藏滚动条功能。.../** * 获取滚动条宽度（避免滚动条出现/消失，页面挤压） */ getScrollBarSize: function() { if (scrollBarWidth !...$vlayer.message({content: 'success closed', icon: 'success'}) } }); 好了，以上就是基于vue.js开发pc端弹框组件实现过程，

2.4K5 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭