在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元无门槛券
手把手带您无忧上云