在web开发中，有时候我们需要实现在页面上点击某个按钮弹出窗口，并禁用页面滑动或滚动的需求。以下是我本人的做法，望大家多多提出意见或建议。 直接上代码： 移动端弹框禁止背景滑动 111</...$('#shade').css('display','block'); $('#tankuang').css('display','block'); }); /*关闭弹框
主按钮之后的下一步操作 弹框级别-关闭弹框刷新数据。 页面级别-这里我认为有待探讨，大家可以根据实际情况判别是否需要回到列表页。 表单的交互 就地编辑、弹窗、抽屉、页面跳转以及新开页面。...弹框和页面如何选择 当承载的东西较多，适合分步骤或者大表单时建议新开一个页面，当表单数量不多时，可以用弹框。...私货 删除二次确认 弹框：需要说明删除信息和影响的情况。 弹框：批量选择，且弹框中不再有其他操作。 就地确认：不需要过多说明，可简单二次确认。...弹框loading：确定按钮点击后需有loading。 表格loading：用表格自带的loading属性。 滚动条 表格宽度过长- 滚动条最好出现在表格中，不是在页面级别。...弹框过长-滚动条最好出现在弹框中，不是页面级别滚动。 避免出现滚动条套娃。 好啦以上就是全部啦！还没看表格的可以看看上一篇哦- 一件事让客户成为你的忠实用户！
假设弹框本身有滚动条，页面因为超出一屏又有一个全局滚动条，那整个滚动体验就会变得很差。...如果了解到弹框的特性后，其实不难分辨什么时候使用那个表现手法更适合。...弹框特性: – 较页面轻，可以更快回到之前的页面 – 相对独立，可以完全不影响页面的布局 – 适合解决简单，一次性的操作 以下列出了一些较适合使用弹框的场景及案例: 1.新手引导 第一感觉是非常重要的。...腾讯企点的提示弹框整理 几个容易被忽视的弹框细节 1.背景锁定与滚动条引起的抖动问题 浏览网页时经常会发现弹框出现后，滚动鼠标时，蒙版下面的页面还是可以滚动的，其实这些滚动都是没必要的，因为弹框的原意就是要聚焦用户的注意力...此时，由于页面滚动条从有到无，页面会晃动，这样糟糕的体验显然是不能容忍了，于是，对元素进行处理，右侧增加一个滚动条宽度（假设宽度是widthScrollbar）的透明边框。
假设弹框本身有滚动条，页面因为超出一屏又有一个全局滚动条，那整个滚动体验就会变得很差。...如果了解到弹框的特性后，其实不难分辨什么时候使用那个表现手法更适合。...弹框特性: – 较页面轻，可以更快回到之前的页面 – 相对独立，可以完全不影响页面的布局 – 适合解决简单，一次性的操作 以下列出了一些较适合使用弹框的场景及案例: 1.新手引导 第一感觉是非常重要的...腾讯企点的提示弹框整理 几个容易被忽视的弹框细节 1.背景锁定与滚动条引起的抖动问题 浏览网页时经常会发现弹框出现后，滚动鼠标时，蒙版下面的页面还是可以滚动的，其实这些滚动都是没必要的，因为弹框的原意就是要聚焦用户的注意力...此时，由于页面滚动条从有到无，页面会晃动，这样糟糕的体验显然是不能容忍了，于是，对元素进行处理，右侧增加一个滚动条宽度（假设宽度是widthScrollbar）的透明边框。
一、 背景锁定与滚动条引起的抖动问题 浏览网页时经常会发现弹框出现后，滚动鼠标时，蒙版下面的页面还是可以滚动的，其实这些滚动都是没必要的，因为弹框的原意就是要聚焦用户的注意力。...因此我们要做的是 – 背景锁定(从技术角度其实是暂时性干掉滚动条)。...技术原理：当Dialog弹框出现的时候，根元素overflow:hidden. problem：此时，由于页面滚动条从有到无，页面会晃动，这样糟糕的体验显然是不能容忍了，于是，对元素进行处理...，右侧增加一个滚动条宽度（假设宽度是widthScrollbar）的透明边框。...二、避免弹框上再弹出弹框 要尽量避免在弹框上再弹一层弹框，2层蒙版会让用户觉得负担很重。可以改用轻量弹框或重新把交互梳理。
有此可见，一旦强交互的传统web页面桌面软件化，内滚动布局是绕不开的一堵墙，了解之还是很有必要的。 三、如何实现内滚动布局？...无法滚动的弹出层 基本上，是个像样的web2.0网站都会有弹框web组件，一个黑色半透明的overlay层，上面摇曳着弹框面板，例如这样的： 对于黑色半透明覆盖层，传统实现是这样的：如果要兼容IE6浏览器...但是，麻烦的事情是，如果弹框自身高度很高，却又没法滚动呢(浏览器可用高度700像素，弹框有900像素高)？...传统布局下的弹框，如果高度很高，直接设置弹框容器position:absolute就可以愉快地上下翻滚了。但是，在内滚动布局下，弹框根本就不在滚动容器里面，翻滚一说从何谈起？ 大危机！怎么办！？...实际上，我们要实现一个弹框效果，只要一层div标签就可以了，核心就是使用兼容的RGBA背景色技巧，然后弹框HTML放在里面： .container { position: absolute; top
有此可见，一旦强交互的传统web页面桌面软件化，内滚动布局是绕不开的一堵墙，了解之还是很有必要的。 三、如何实现内滚动布局？...无法滚动的弹出层 基本上，是个像样的web2.0网站都会有弹框web组件，一个黑色半透明的overlay层，上面摇曳着弹框面板，例如这样的： ?...但是，麻烦的事情是，如果弹框自身高度很高，却又没法滚动呢(浏览器可用高度700像素，弹框有900像素高)？...传统布局下的弹框，如果高度很高，直接设置弹框容器position:absolute就可以愉快地上下翻滚了。但是，在内滚动布局下，弹框根本就不在滚动容器里面，翻滚一说从何谈起？ 大危机！怎么办！？ ?...实际上，我们要实现一个弹框效果，只要一层div标签就可以了，核心就是使用兼容的RGBA背景色技巧，然后弹框HTML放在里面： .container { position: absolute; top
ps：我偷懒直接js控制了行间样式，但标准写法应该是给body添加类名来控制 局限问题： body滚动后再触发弹层，会使body页面回滚到顶部。...二、body无滚动 + 弹层内部滚动[css-弹框超出滚动|真机有bug] 适用场景需满足以下条件： 1、body最好是一屏、无滚动 2、虽然body内容超出一屏需滚动，但触发弹层出现的按钮在第一屏中...关键代码： JS控制弹窗的交互、body的禁止滚动 ? css添加弹层的超出滚动效果 ? 局限问题： 弹层中内容滚动到顶部或底部后，还会连带页面body一起滚动。也就是还会发生穿透效果。...真正的问题是当我们滑动弹窗可滚动区域，把可滚动区域的内容上滑到底部或下拉到顶部后，再触发弹窗可滚动区域准备滑动，此时的背景页面就会跟随滚动。真是恐怖。...1、（需满足）弹层内容不需要滚动 解决方案： 当弹层出现的时候不需要再禁掉body的滚动效果了，我们可以从弹层方面入手，阻止弹框的touchmove事件的默认行为。
实际上，内滚动布局还会带来带有质变性质的一些特性。 无法滚动的弹出层 基本上，是个像样的web2.0网站都会有弹框web组件，一个黑色半透明的overlay层，上面摇曳着弹框面板，例如这样的： ?...但是，麻烦的事情是，如果弹框自身高度很高，却又没法滚动呢(浏览器可用高度700像素，弹框有900像素高)？...传统布局下的弹框，如果高度很高，直接设置弹框容器position:absolute就可以愉快地上下翻滚了。但是，在内滚动布局下，弹框根本就不在滚动容器里面，翻滚一说从何谈起？ 大危机！怎么办！？ ?...合体与滚动 合体是什么意思呢？基本上，90%+的弹框组件，半透明覆盖层overlay和弹框dialog是两个并列的兄弟关系的独立的元素，这种设计的好处在于overlay组件可以复用。...实际上，我们要实现一个弹框效果，只要一层div标签就可以了，核心就是使用兼容的RGBA背景色技巧，然后弹框HTML放在里面： .container { position: absolute; top
--新增数据源弹框--> <!...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; } /*新增弹框头部
在单实例模式下：如果目标页面的url在页面栈中已经存在同url页面，离栈顶最近同url页面会被移动到栈顶，替换当前页面，并销毁被替换的当前页面，移动后的页面为新建页，页面栈的元素数量会减1；如果目标页面的...Grid 为例我们查看其示例代码，想要实现滚动效果，我们只需要给宽高任意一方限定即可八，并配置相应属性，例如仅设置columnsTemplate属性，不设置rowsTemplate属性，就可以实现Grid...列表的滚动组件页面import GridModel from '....：以下是弹框的其他配置，比如我们点击弹框以外的遮罩层是否关闭弹窗日期弹框@Componentexport default struct userPage { @State dateStr:string...") .onClick(()=> { this.alterFunc(); }) } }}还有剩下几个弹框样式，我就不一一赘述了，我们可以去官网查看列表选择弹框时间滑动选择器弹框文本滑动选择器弹框主要写一下自定义弹框
描述 在近期的一个移动端项目中，有一个页面需要有弹框提示，并且这个弹框通过关闭按钮关闭。...页面当中使用了 iScroll 来实现页面局部滚动，在 iScroll 的配置当中把 tap 和 click 事件都开启了。...$refs.wrapper, { mouseWheel: true, click: true, tap: true }) 在实现过程中，遇到了一个奇怪的问题，由于按钮的位置与弹框右上角的关闭按钮位置一致...，当我点击按钮时，弹框一闪而过。...其他 tap 一词 对于 tap 这个词，用过 Zepto 或 KISSY 等移动端js库的人肯定对tap事件不陌生，做PC页面时绑定 click，相应地手机页面就绑定 tap。
我们应该都做过或见过这样的交互：点击下图，弹框查看原始大图；或者一屏内（不能有滚动条）大图幻灯片浏览。...连弹框一起被废掉了！ ? 而支持vh单位的IE9浏览器呢~~当当当当，见下面截图： ?...浏览器这回终于是“媳妇熬成婆”了，不容易，大家鼓掌…… 相关图片限制CSS如下： .vw_vh_img { max-width: 90vw; max-height: 90vh; } 注：demo页面使用的弹框脚本就是之前...您可以狠狠地点击这里：vw, vh视区完全覆盖与纯CSS弹框 ? ?...七、场景之：Office Word效果 我们可以把web页面做得像Office文档那样，一屏正好一页；拖动滚动条，我们可以一直往下看到最后一页。 如果只借助CSS，这种效果绝对定位是实现不了的。
1.3 其它方法和属性 fetch：未来学习ajax的时候可以用到的方法 open：打开一个新的页面 outerHeight：浏览器的高度 outerWidth：浏览器的宽度 alert：仅仅只是一个弹框...，只有一个确定按钮 comfirm：有确定和取消按钮的弹框，返回值分别为true和false prompt：这是一个可以让用户输入内容的弹框。...（不建议使用） scrollto：设置滚动条，滚动到什么位置，语法：scrollTo(水平位置，垂直位置) 2 location hash: "#hotspotmining" --->页面锚点的位置 host...localStorage.getItem('username')) 删除所有 localStorage.clear() 6 sessionStorage 和 localStorage 类似，但仅在当次绘画有效，当关闭页面后...可以实现对象和文本的相互转换 var obj = { name:"蔡徐坤", like:["唱","跳","rap","打代码"] } //将js对象转换成json格式的字符串
if(TextUtils.isEmpty(remoteJs)) { return; } String js = "javascript:"; //作用:指明字符串后面的都是js代码 js...';"; js+=remoteJs; mCommonWebView.callJsFunction(js); //加载js代码 } private void runRemoteJs(String...补充知识：android WebView使用Post请求和设置浏览器弹框 这里要注意：post请求参数只能传byte数组，而且必须是键值对字符串形式的byte数组，其中的key是后台服务器接收key，后台规定...获取传过来的支付参数 urlParameter = getIntent().getStringExtra("urlParameter"); Log.i("TAG", urlParameter); //初始化重新加载框...onPageStarted(WebView view, String url, Bitmap favicon) { Log.d("TAG", "onPageStarted--url:"+url); //支付完成后,
微信浏览器和QQ浏览器有个自带的特殊功能，就是长按会出现上图所示的弹框。有时候前端页面中有长按事件时，总是会触发这个弹框而影响我们自己开发的功能。那么该如何屏蔽这个弹框呢？ ...很简单，这个弹框实际上等同于PC环境下的鼠标右键的弹框，因此只要禁止页面的弹框事件就能完美屏蔽该弹框对我们功能带来的影响。...也许右键弹框在PC端很重要，但是对于移动端而言，这个弹框显然可有可无，因此在需要时，放心的使用上面的代码把它屏蔽掉就行。...(); },false); 上面这段代码会阻止页面滚动事件、a标签默认跳转事件等不该屏蔽的事件。...还有当长按事件下有图片时，长按会弹出发送给朋友，保存到手机，收藏的弹框，解决办法是在图片上层盖一个透明层，让长按事件点击不到图片，即可阻止。
我们了解公司项目背景后，我们就开始定位产品的设计风格，根据产品原型出几张符合产品风格的设计稿， 主要包括项目的主界面的设计风格，包括界面设计的颜色、按钮、表格、表单、弹框等元素样式的设计。...为保证 Web 页面的整体效果，图标的最大使用以不超过 48px 为准。 滚动图片的动画则使用多张 png、jpg格式图片即可。...表格的设计规范的设计思考点如下： 操作列按钮：每个按钮字数不超过6个字。 列数太多：默认展示范围：3-8列，若出现更多，可固定重要列，剩余列滚动条展示交互设计。...，完成表格占比后，对于实现效果不理想的，可以根据具体字段做微调处理。...弹框，如下图所示。 弹框主要分为两个大类模态弹框和非模态弹框，他们最大的区别就是是否强制用户交互。 - 常规状态通常出现在页面的上方。 - 有普通信息、成功信息、失败信息、警示信息四种icon。
当你想自动关闭时，可以time: 5000，即代表5秒后自动关闭，注意单位是毫秒（1秒=1000毫秒） 14、id-用于控制弹层唯一标识 类型：String，默认：空字符 设置该值后，不管是什么类型的层...如果不想，设置fixed: false即可 默认情况下，背景是利用鼠标滚动的 18、resize-是否允许拉伸 类型：Boolean，默认：true 默认情况下，你可以在弹层右下角拖动来拉伸尺寸。...如果对指定的弹层屏蔽该功能，设置 false即可。...类型：Boolean，默认：true，默认允许浏览器滚动 如果设定scrollbar: false，则屏蔽，即使浏览器存在滚动条，在弹出层出现后，也会消失 21、maxWidth-最大宽度 类型：Number...//页面一打开就执行弹层 layer.ready(function(){ layer.msg('很高兴一开场就见到你'); }); 3、layer.open(options)-原始核心方法
我先解释下什么是滚动穿透： 页面滑出了一个弹窗，我们用手指触摸屏幕滑动时，会发现弹窗下面的内容还是在滚动。这个现象就是滚动穿透。 接下就说下我对滚动穿透问题解决方案探索的过程，希望对大家有点启发。...需求 需求: 希望在点击图片的时候，从下方弹一个全屏的弹框来描述这张图片的详情。 方案 接到这个需求觉得没有难度，很快就提测了，然后就开始逛逛掘金。可刚看大佬们的文章看的开心的时候，测试就在微信我。...，下方的 body 是固定的无法滚动； body 的滚动位置不会丢失； body 有 scroll 事件； 方案二可以适应绝大多数的弹窗需求，提测后测试方也没有在提其他问题，这个问题算是完美的解决了。...不过我在这个过程有一个疑问： IOS 自有的橡皮筋效果会导致页面会出现短暂卡顿现象，暂时没有找到原因，请教各位。...使用插件： 对于插件我的态度是，除非是自己实现起来太复杂，否则还是自己花点时间去实现。原因有二： 使用插件就意味着需要引入的文件至少多了一个。 插件过多，担心日后项目升级维护成本加大。 以上。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储
