在web开发中，有时候我们需要实现在页面上点击某个按钮弹出窗口，并禁用页面滑动或滚动的需求。以下是我本人的做法，望大家多多提出意见或建议。 直接上代码： 移动端弹框禁止背景滑动 111</...$('#shade').css('display','block'); $('#tankuang').css('display','block'); }); /*关闭弹框
需求 编写一个简单的页面弹框的示例，功能要求如下： 一个点击按钮，点击可以弹出一个弹框 弹框固定出现在页面的中间位置 需要写一个背景mask，用于遮掩背景，设置透明度0.3 点击弹框外的位置，弹框就可以消失不见...，可以使用fadeOut() 点击弹框内的文本框可以输入内容，弹框不会消失不见 点击弹框右上角的 × 号，则关闭弹框 看完了需求，首先快速写好一波html + css 编写基本html + css ?...好了，这里已经实现了点击显示的操作了，那么下一步要编写点击弹框的其他部分，则弹框隐藏。 编写点击弹框外部，则隐藏 ?...但是，此时点击弹框内也是会让弹框消失的，那如果我要填写弹框的input框来写内容，还没写就消失了，这该怎么办呢？...最后，编写弹框右上角的× 号，点击则隐藏弹框 因为现在点击弹框都不会隐藏，所以可以单独给#close写一个click()方法，设置触发fadeOut()事件。 ?
1、单纯的关闭 window.opener.location.reload(); //刷新父窗口中的网页 window.close();//关闭当前窗窗口 2、...
我们可以使用， catchtouchmove="ture" 属性，来禁止滑动。 注意，该属性只支持在真机上测试，模拟器上效果可能无法展示。...只需要在禁止滑动的标签上添加一个 catchtouchmove="ture" 属性即可，代码如下： <view wx:if="{{payOpen}}" class='paySelect' catchtouchmove
前言： 项目有个需求是：跳转路由，在离开页面前，需要弹框询问用户是否确定离开。 用react-router的组件是可以的，但是，怎么使用antd组件（或者说自定义组件）呢？...medium.com/@michaelchan_13570/using-react-router-v4-prompt-with-custom-modal-component-ca839f5faf39） （4）在离开页面...，路由跳转时，自定义弹框拦截，并询问 handlePrompt = location => { if (!...> 保存 完美实现离开页面...，路由拦截的同时，显示自定义模态框！
不显示滚动条（css） ::-webkit-scrollbar { width: 0px; } 禁止页面滚动条（js） document.body.parentNode.style.overflowY...= "hidden"; $("body").parent().css("overflow-y","hidden"); 启用浏览器滚动条（js） document.body.parentNode.style.overflowY
(e){ e.returnValue=("确定离开当前页面吗？")...该事件可用于弹出对话框，提示用户是继续浏览页面还是离开当前页面。对话框默认的提示信息根据不同的浏览器有所不同，标准的信息类似 “确定要离开此页吗？”。该信息不能删除。...但你可以自定义一些消息提示与标准信息一起显示在对话框。注意： 在 Firefox 浏览器中，只显示默认提醒信息（不显示自定义信息）。...触发于： 关闭浏览器窗口 通过地址栏或收藏夹前往其他页面的时候 点击返回，前进，刷新，主页其中一个的时候 点击 一个前往其他页面的url连接的时候 调用以下任意一个事件的时候：click，document...当用window open打开一个页面，并把本页的window的名字传给要打开的页面的时候。 重新赋予location.href的值的时候。
一、 背景锁定与滚动条引起的抖动问题 浏览网页时经常会发现弹框出现后，滚动鼠标时，蒙版下面的页面还是可以滚动的，其实这些滚动都是没必要的，因为弹框的原意就是要聚焦用户的注意力。...因此我们要做的是 – 背景锁定(从技术角度其实是暂时性干掉滚动条)。...技术原理：当Dialog弹框出现的时候，根元素overflow:hidden. problem：此时，由于页面滚动条从有到无，页面会晃动，这样糟糕的体验显然是不能容忍了，于是，对元素进行处理...，右侧增加一个滚动条宽度（假设宽度是widthScrollbar）的透明边框。...二、避免弹框上再弹出弹框 要尽量避免在弹框上再弹一层弹框，2层蒙版会让用户觉得负担很重。可以改用轻量弹框或重新把交互梳理。
假设弹框本身有滚动条，页面因为超出一屏又有一个全局滚动条，那整个滚动体验就会变得很差。...弹框特性: – 较页面轻，可以更快回到之前的页面 – 相对独立，可以完全不影响页面的布局 – 适合解决简单，一次性的操作 以下列出了一些较适合使用弹框的场景及案例: 1.新手引导 第一感觉是非常重要的。...腾讯企点的提示弹框整理 几个容易被忽视的弹框细节 1.背景锁定与滚动条引起的抖动问题 浏览网页时经常会发现弹框出现后，滚动鼠标时，蒙版下面的页面还是可以滚动的，其实这些滚动都是没必要的，因为弹框的原意就是要聚焦用户的注意力...此时，由于页面滚动条从有到无，页面会晃动，这样糟糕的体验显然是不能容忍了，于是，对元素进行处理，右侧增加一个滚动条宽度（假设宽度是widthScrollbar）的透明边框。...Dialog隐藏的时候再把滚动条放开。 2.避免弹框上再弹出弹框 要尽量避免在弹框上再弹一层弹框，2层蒙版会让用户觉得负担很重。可以改用轻量弹框或重新把交互梳理。
假设弹框本身有滚动条，页面因为超出一屏又有一个全局滚动条，那整个滚动体验就会变得很差。...弹框特性: – 较页面轻，可以更快回到之前的页面 – 相对独立，可以完全不影响页面的布局 – 适合解决简单，一次性的操作 以下列出了一些较适合使用弹框的场景及案例: 1.新手引导 第一感觉是非常重要的...腾讯企点的提示弹框整理 几个容易被忽视的弹框细节 1.背景锁定与滚动条引起的抖动问题 浏览网页时经常会发现弹框出现后，滚动鼠标时，蒙版下面的页面还是可以滚动的，其实这些滚动都是没必要的，因为弹框的原意就是要聚焦用户的注意力...此时，由于页面滚动条从有到无，页面会晃动，这样糟糕的体验显然是不能容忍了，于是，对元素进行处理，右侧增加一个滚动条宽度（假设宽度是widthScrollbar）的透明边框。...Dialog隐藏的时候再把滚动条放开。 2.避免弹框上再弹出弹框 要尽量避免在弹框上再弹一层弹框，2层蒙版会让用户觉得负担很重。可以改用轻量弹框或重新把交互梳理。
二、body无滚动 + 弹层内部滚动[css-弹框超出滚动|真机有bug] 适用场景需满足以下条件： 1、body最好是一屏、无滚动 2、虽然body内容超出一屏需滚动，但触发弹层出现的按钮在第一屏中...关键代码： JS控制弹窗的交互、body的禁止滚动 ? css添加弹层的超出滚动效果 ? 局限问题： 弹层中内容滚动到顶部或底部后，还会连带页面body一起滚动。也就是还会发生穿透效果。...1、（需满足）弹层内容不需要滚动 解决方案： 当弹层出现的时候不需要再禁掉body的滚动效果了，我们可以从弹层方面入手，阻止弹框的touchmove事件的默认行为。...但是同样的问题是，需要判断滚动到顶部和滚动到底部的时候禁止滚动。否则，就和第二条一样，触碰到上下两端，弹窗可滚动区域的滚动条到了顶部或者底部，依旧穿透到body，使得body跟随弹窗滚动。...问题局限： 不好的点就是没有原生滚动条那种效果，一点也不灵动，只能鼠标移动多少、可滚动区域挪动多少。
主按钮之后的下一步操作 弹框级别-关闭弹框刷新数据。 页面级别-这里我认为有待探讨，大家可以根据实际情况判别是否需要回到列表页。 表单的交互 就地编辑、弹窗、抽屉、页面跳转以及新开页面。...弹框和页面如何选择 当承载的东西较多，适合分步骤或者大表单时建议新开一个页面，当表单数量不多时，可以用弹框。...私货 删除二次确认 弹框：需要说明删除信息和影响的情况。 弹框：批量选择，且弹框中不再有其他操作。 就地确认：不需要过多说明，可简单二次确认。...弹框loading：确定按钮点击后需有loading。 表格loading：用表格自带的loading属性。 滚动条 表格宽度过长- 滚动条最好出现在表格中，不是在页面级别。...弹框过长-滚动条最好出现在弹框中，不是页面级别滚动。 避免出现滚动条套娃。 好啦以上就是全部啦！还没看表格的可以看看上一篇哦- 一件事让客户成为你的忠实用户！
所谓“内滚动布局”，顾名思义就是主滚动条在页面内部的布局，是相对于传统的滚动而言的，例如，下图所示滚动条，是从头部下方开始： 传统的页面滚动，基本上是相对于整个浏览器窗体，例如，QQ视频首页...无法滚动的弹出层 基本上，是个像样的web2.0网站都会有弹框web组件，一个黑色半透明的overlay层，上面摇曳着弹框面板，例如这样的： 对于黑色半透明覆盖层，传统实现是这样的：如果要兼容IE6浏览器...不过这也没什么，对吧，弹框出现时候，页面背景没法滚也挺好的。 但是，麻烦的事情是，如果弹框自身高度很高，却又没法滚动呢(浏览器可用高度700像素，弹框有900像素高)？...传统布局下的弹框，如果高度很高，直接设置弹框容器position:absolute就可以愉快地上下翻滚了。但是，在内滚动布局下，弹框根本就不在滚动容器里面，翻滚一说从何谈起？ 大危机！怎么办！？...基本上，90%+的弹框组件，半透明覆盖层overlay和弹框dialog是两个并列的兄弟关系的独立的元素，这种设计的好处在于overlay组件可以复用。
: ‘我是标题’, 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 遮罩 即弹层外区域。
所谓“内滚动布局”，顾名思义就是主滚动条在页面内部的布局，是相对于传统的滚动而言的，例如，下图所示滚动条，是从头部下方开始： ?...无法滚动的弹出层 基本上，是个像样的web2.0网站都会有弹框web组件，一个黑色半透明的overlay层，上面摇曳着弹框面板，例如这样的： ?...不过这也没什么，对吧，弹框出现时候，页面背景没法滚也挺好的。 但是，麻烦的事情是，如果弹框自身高度很高，却又没法滚动呢(浏览器可用高度700像素，弹框有900像素高)？...传统布局下的弹框，如果高度很高，直接设置弹框容器position:absolute就可以愉快地上下翻滚了。但是，在内滚动布局下，弹框根本就不在滚动容器里面，翻滚一说从何谈起？ 大危机！怎么办！？ ?...基本上，90%+的弹框组件，半透明覆盖层overlay和弹框dialog是两个并列的兄弟关系的独立的元素，这种设计的好处在于overlay组件可以复用。
--新增数据源弹框--> <!...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; } /*新增弹框头部
前言：学习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(‘很高兴一开场就见到你’);
在设计之初参考借鉴了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端弹框组件实现过程，
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
