写一个移动端弹框，有遮影层，，后面的内容禁止滚动

最新推荐文章于 2024-06-04 09:15:09 发布
最新推荐文章于 2024-06-04 09:15:09 发布
阅读量134 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_43661347/article/details/85052441
版权
博客介绍了使用JS控制页面垂直滚动条启用和禁用的方法。启用禁用时，通过设置document.documentElement.style.overflowY为'hidden'；还原时，将该属性重置为'scroll'。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

启用禁用时，设置js

document.documentElement.style.overflowY = ‘hidden’;
当还原时候，只需要把属性重置scroll就可以了
document.documentElement.style.overflowY = ‘scroll’;

菜是原罪*
关注
vue 弹出层 加遮罩层 页面禁止滑动
weixin_44523517的博客
11-04 1049
vue 弹出层 加遮罩层 页面禁止滑动
Vue移动端项目（一）
qq_48687155的博客
08-20 3457
Vue移动端项目
移动端弹出框样式（无框架）
09-28
纯html+css代码编写手机端弹出层样式，其中包含确定和取消按钮
移动端弹框选择器
张杰伦的博客
09-24 412
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width,initial-scale=1.0" /> <link rel=...
CSS制作一个花式标题
Sunshine_Jian的博客
01-07 1224
用纯CSS制作了一个花式标题框,快来装饰一下你的网页吧！
移动端弹窗(提示框)(绝对可以使用)
08-30
在网上找了很多插件,基本上都有些问题无法使用,这个也是在我们前端妹妹那要来的之前也是有点问题,当是经过修改可以使用了.里面有demo,比较简洁,文件小,
移动端底部弹框js及css
11-08
这是一份移动端手机底部弹框的css以及js，还有部分js及前端代码在我的博客里，你可以直接进入我的博客主页查找，或者在csdn中搜索：移动端手机底部弹框查找
禁止弹窗中蒙层底部页面跟随滚动的几种方法
01-19
但是，在蒙层元素中滑动的时候，滑到内容的尽头时，再继续滑动，蒙层底部的页面会开始滚动，显然这不是我们想要的效果，因此需要阻止这种行为。 那么，如何阻止呢？请看以下分析： 方案分析 方案一 打开蒙层时，给...
解决弹框覆盖页面滚动问题的方法（兼容iOS和Android）
在开发移动端网页时，有时会出现当弹出一个遮罩层（通常用于模态对话框或信息提示）时，用户仍然能够滚动遮罩层下面的列表页面，这通常会破坏用户的交互体验和界面的视觉效果。为了解决这一问题，本解决方案提供了...
禁止弹窗底部页面滑动解决方案整理
七月的你的博客
02-17 2139
弹窗底部内容不可滑动解决方案整理 1.如果弹窗内容不可滑动，仅展示 方案一：只需要给弹窗蒙层加上 @touchmove.prevent 即可实现，无兼容性问题 方案二：在弹窗蒙层加上touch-action:none; 在iPhone5和ipad上可能会没有效果 方案三：打开弹窗时，设置body的overflow属性为hidden并阻止默认事件 document.body.style.overflow = 'hidden'; var fn = function(e){e.preventDefault()
详解基于Vue2.0实现的移动端弹窗(Alert, Confirm, Toast)组件
12-07
wc-messagebox 基于 vue 2.0 开发的插件 包含 Alert, Confirm, Toast, Prompt 仿照 iOS 原生UI(样式来源: MUI) 一些想法 刚开始的时候想要用现成的弹窗组件来着, 但是查找一圈没有发现比较合适项目的, 所以才自己开发了一个, 包含 Alert, Comfirm, Toast, Prompt 四种, 并且可以单个引入. Vue 的组件开发实际上比较简单, 有兴趣的可以看下源码实现, 步骤很清晰. 关于样式的问题, 是直接从 MUI（魅族开发的） 中拿过来的, 仿照 iOS 的效果. 效果图 图是动图… 动不了点一
从用户体验到细节之美：移动端弹窗设计
最新发布
LuckyWinty的博客
06-04 1109
点击上方前端Q，关注公众号回复加群，加入前端Q技术交流群在当今的移动应用设计中，弹窗作为一种重要的交互元素，对于提升用户体验和增强应用的可用性具有举足轻重的作用。然而，弹窗设计并非简单的堆砌信息，它需要考虑到用户的使用习惯、心理预期以及操作流程等多个方面。因此，如何设计出优秀的移动端弹窗，成为了一个值得探讨的话题。本文旨在为设计师们提供一份全面的移动端弹窗设计指南。我们将从弹窗的定义与重要性、类...
移动端弹窗设计规范总结（二）
asdasdasd23451的博客
11-02 2599
-
H5 pc端，移动端自定义弹窗模块思路
招来红月的博客
05-12 6502
再一次项目中要求 在提交时 要让客户核对下信息 并且要去输入密码 然而再用模块时发现没有合适的 安卓的我们可以写 可是没人写ios 最后只有走H5 JS这条路线 因为这个不论是安卓还是ios都可用 当时我就想如果我弄一个模块 以后想用时直接引入文件就行了 不用每次都去写弹窗 那么就模块化 而且这个应该很简单 用不到什么高科技 咱们就用js就能写吧 编写前先想一想 自己需要什么 需要怎么做 首...
移动端弹窗设计规范总结（一）
asdasdasd23451的博客
11-01 950
-
HTML5手机端弹窗、提示框、loading加载（多功能xwPop弹窗升级版）
weixin_33709364的博客
01-11 814
手机移动端响应式动画弹窗提示框插件xwPop，原生JS实现，带CSS3动画效果，丰富的JS弹出框提示信息插件，支持基本信息提示、带图标loading信息提示、confirm提示、自定义信息提示图标，仿Ios信息提示，支持较现代的浏览器。 在没有压缩的情况下，代码大小只有6KB，功能强大不输网上其他一些弹窗插件。 调用方式： 代码展示： 效果图...
移动端模拟alert和tip弹框
小记心得
07-27 7179
最近，移动端的项目越来越多，每个项目中都有登录注册界面等，异常提示的弹框和tip用的较多， 于是抽出点时间封装了下对应的jquery插件，和一个函数；以便项目重用性。 废话不多说，直接上代码： 1  模拟alert弹出框函数 //模拟alert弹出框函数；datetime：20160727；by：xiewei【依赖于flexible.js和jquery或者zepto】 fu
手机端弹出提示框，最好用的移动端提示框SweetAlert 插件
热门推荐
飞鸟的博客
12-08 2万+
更多 http://blog.youkuaiyun.com/qq_33556185/article/details/50612270
jQuery 移动端HTML5 弹出窗插件 box.js
小强的码屋
05-10 5596
本文主要描述一个移动端的弹窗组件，支持多种模式切换，基于jQuery，函数本身封装在jQuery全局变量中，方便使用。 本组件不许单独引用css文件，支持外部修改默认的图标集，提供多种弹出方式，另外支持手动关闭和自动关闭。 弹出的层会根据文字的多少自动适配本身的宽度和高度，同时支持外部自定义高度宽度，也支持动画效果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值