在web开发中，有时候我们需要实现在页面上点击某个按钮弹出窗口，并禁用页面滑动或滚动的需求。以下是我本人的做法，望大家多多提出意见或建议。 直接上代码： 移动端弹框禁止背景滑动 111</
1、单纯的关闭 window.opener.location.reload(); //刷新父窗口中的网页 window.close();//关闭当前窗窗口 2、提交后关闭 function save()
window.close()在IE浏览器下，关闭窗口前会弹个确认框。通过下面的方法可以跳过确认框，直接关闭窗口。
该事件可用于弹出对话框，提示用户是继续浏览页面还是离开当前页面。对话框默认的提示信息根据不同的浏览器有所不同，标准的信息类似 “确定要离开此页吗？”。该信息不能删除。...但你可以自定义一些消息提示与标准信息一起显示在对话框。注意： 在 Firefox 浏览器中，只显示默认提醒信息（不显示自定义信息）。...触发于： 关闭浏览器窗口 通过地址栏或收藏夹前往其他页面的时候 点击返回，前进，刷新，主页其中一个的时候 点击 一个前往其他页面的url连接的时候 调用以下任意一个事件的时候：click，document...当用window open打开一个页面，并把本页的window的名字传给要打开的页面的时候。 重新赋予location.href的值的时候。...本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
在Chrome、Safari、Firefox 4+和Internet Explorer 10以上可以实现 正文 实现代码如下： function processAjaxData(response, urlPath
ps：我偷懒直接js控制了行间样式，但标准写法应该是给body添加类名来控制 局限问题： body滚动后再触发弹层，会使body页面回滚到顶部。...二、body无滚动 + 弹层内部滚动[css-弹框超出滚动|真机有bug] 适用场景需满足以下条件： 1、body最好是一屏、无滚动 2、虽然body内容超出一屏需滚动，但触发弹层出现的按钮在第一屏中...关键代码： JS控制弹窗的交互、body的禁止滚动 ? css添加弹层的超出滚动效果 ? 局限问题： 弹层中内容滚动到顶部或底部后，还会连带页面body一起滚动。也就是还会发生穿透效果。...1、（需满足）弹层内容不需要滚动 解决方案： 当弹层出现的时候不需要再禁掉body的滚动效果了，我们可以从弹层方面入手，阻止弹框的touchmove事件的默认行为。...这时，我们可以通过记录用户打开弹窗前所滚动页面的位置，在弹层展开的时候赋给body在css中的top值，等关闭弹层的时候，再把这个值赋值给body在js中的scrollTop值，还原body的滚动位置。
描述 在近期的一个移动端项目中，有一个页面需要有弹框提示，并且这个弹框通过关闭按钮关闭。...页面当中使用了 iScroll 来实现页面局部滚动，在 iScroll 的配置当中把 tap 和 click 事件都开启了。...$refs.wrapper, { mouseWheel: true, click: true, tap: true }) 在实现过程中，遇到了一个奇怪的问题，由于按钮的位置与弹框右上角的关闭按钮位置一致...，当我点击按钮时，弹框一闪而过。...其他 tap 一词 对于 tap 这个词，用过 Zepto 或 KISSY 等移动端js库的人肯定对tap事件不陌生，做PC页面时绑定 click，相应地手机页面就绑定 tap。
实际上，内滚动布局还会带来带有质变性质的一些特性。 无法滚动的弹出层 基本上，是个像样的web2.0网站都会有弹框web组件，一个黑色半透明的overlay层，上面摇曳着弹框面板，例如这样的： ?...但是，麻烦的事情是，如果弹框自身高度很高，却又没法滚动呢(浏览器可用高度700像素，弹框有900像素高)？...传统布局下的弹框，如果高度很高，直接设置弹框容器position:absolute就可以愉快地上下翻滚了。但是，在内滚动布局下，弹框根本就不在滚动容器里面，翻滚一说从何谈起？ 大危机！怎么办！？ ?...合体与滚动 合体是什么意思呢？基本上，90%+的弹框组件，半透明覆盖层overlay和弹框dialog是两个并列的兄弟关系的独立的元素，这种设计的好处在于overlay组件可以复用。...实际上，我们要实现一个弹框效果，只要一层div标签就可以了，核心就是使用兼容的RGBA背景色技巧，然后弹框HTML放在里面： .container { position: absolute; top
有此可见，一旦强交互的传统web页面桌面软件化，内滚动布局是绕不开的一堵墙，了解之还是很有必要的。 三、如何实现内滚动布局？...无法滚动的弹出层 基本上，是个像样的web2.0网站都会有弹框web组件，一个黑色半透明的overlay层，上面摇曳着弹框面板，例如这样的： 对于黑色半透明覆盖层，传统实现是这样的：如果要兼容IE6浏览器...但是，麻烦的事情是，如果弹框自身高度很高，却又没法滚动呢(浏览器可用高度700像素，弹框有900像素高)？...传统布局下的弹框，如果高度很高，直接设置弹框容器position:absolute就可以愉快地上下翻滚了。但是，在内滚动布局下，弹框根本就不在滚动容器里面，翻滚一说从何谈起？ 大危机！怎么办！？...实际上，我们要实现一个弹框效果，只要一层div标签就可以了，核心就是使用兼容的RGBA背景色技巧，然后弹框HTML放在里面： .container { position: absolute; top
无法滚动的弹出层 基本上，是个像样的web2.0网站都会有弹框web组件，一个黑色半透明的overlay层，上面摇曳着弹框面板，例如这样的： ?...对于黑色半透明覆盖层，传统实现是这样的：如果要兼容IE6浏览器，一般是absolute绝对定位，高度由JS计算赋予；如果不需要管IE6, 则可以使用fixed固定定位。...但是，麻烦的事情是，如果弹框自身高度很高，却又没法滚动呢(浏览器可用高度700像素，弹框有900像素高)？...传统布局下的弹框，如果高度很高，直接设置弹框容器position:absolute就可以愉快地上下翻滚了。但是，在内滚动布局下，弹框根本就不在滚动容器里面，翻滚一说从何谈起？ 大危机！怎么办！？ ?...实际上，我们要实现一个弹框效果，只要一层div标签就可以了，核心就是使用兼容的RGBA背景色技巧，然后弹框HTML放在里面： .container { position: absolute; top
博客开启PJAX局部刷新或Ajax导致文章的代码高亮插件第一次加载不会引用高亮模块需要再刷新一次,那么这段代码可以帮助你在加载完成后自动刷新一次,就解决了这个问题...
--新增数据源弹框--> <!...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; } /*新增弹框头部
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格式的字符串
主按钮之后的下一步操作 弹框级别-关闭弹框刷新数据。 页面级别-这里我认为有待探讨，大家可以根据实际情况判别是否需要回到列表页。 表单的交互 就地编辑、弹窗、抽屉、页面跳转以及新开页面。...弹框和页面如何选择 当承载的东西较多，适合分步骤或者大表单时建议新开一个页面，当表单数量不多时，可以用弹框。...私货 删除二次确认 弹框：需要说明删除信息和影响的情况。 弹框：批量选择，且弹框中不再有其他操作。 就地确认：不需要过多说明，可简单二次确认。...弹框loading：确定按钮点击后需有loading。 表格loading：用表格自带的loading属性。 滚动条 表格宽度过长- 滚动条最好出现在表格中，不是在页面级别。...弹框过长-滚动条最好出现在弹框中，不是页面级别滚动。 避免出现滚动条套娃。 好啦以上就是全部啦！还没看表格的可以看看上一篇哦- 一件事让客户成为你的忠实用户！
假设弹框本身有滚动条，页面因为超出一屏又有一个全局滚动条，那整个滚动体验就会变得很差。...如果了解到弹框的特性后，其实不难分辨什么时候使用那个表现手法更适合。...弹框特性: – 较页面轻，可以更快回到之前的页面 – 相对独立，可以完全不影响页面的布局 – 适合解决简单，一次性的操作 以下列出了一些较适合使用弹框的场景及案例: 1.新手引导 第一感觉是非常重要的。...腾讯企点的提示弹框整理 几个容易被忽视的弹框细节 1.背景锁定与滚动条引起的抖动问题 浏览网页时经常会发现弹框出现后，滚动鼠标时，蒙版下面的页面还是可以滚动的，其实这些滚动都是没必要的，因为弹框的原意就是要聚焦用户的注意力...此时，由于页面滚动条从有到无，页面会晃动，这样糟糕的体验显然是不能容忍了，于是，对元素进行处理，右侧增加一个滚动条宽度（假设宽度是widthScrollbar）的透明边框。
假设弹框本身有滚动条，页面因为超出一屏又有一个全局滚动条，那整个滚动体验就会变得很差。...如果了解到弹框的特性后，其实不难分辨什么时候使用那个表现手法更适合。...弹框特性: – 较页面轻，可以更快回到之前的页面 – 相对独立，可以完全不影响页面的布局 – 适合解决简单，一次性的操作 以下列出了一些较适合使用弹框的场景及案例: 1.新手引导 第一感觉是非常重要的...腾讯企点的提示弹框整理 几个容易被忽视的弹框细节 1.背景锁定与滚动条引起的抖动问题 浏览网页时经常会发现弹框出现后，滚动鼠标时，蒙版下面的页面还是可以滚动的，其实这些滚动都是没必要的，因为弹框的原意就是要聚焦用户的注意力...此时，由于页面滚动条从有到无，页面会晃动，这样糟糕的体验显然是不能容忍了，于是，对元素进行处理，右侧增加一个滚动条宽度（假设宽度是widthScrollbar）的透明边框。
Scroll) jquery-smooth-scroll jquery.scrollTo – 平滑滚动到页面指定位置 13.12 全屏滚动 pagePiling.js – 全屏滚动效果 13.13 分屏滚动...multiscroll.js – 分屏滚动效果 13.14 转场效果 Animsition – 页面切换时的过渡效果 13.15 固定元素(Sticky) sticky – jQuery Plugin...– 专注于拖拽功能的 JS 库 13.18 隐藏或展示页面元素 Headroom.js – 在不需要页头时将其隐藏 Readmore.js – 内容显示与隐藏插件 13.19 滚动条 jScrollPane...通知组件/弹框组件 alertify.js AlertifyJS SweetAlert Messenger – 非常酷的弹框组件 PNotify Notify.js – A simple, versatile...– 实现纯JS网页截图 jquery.qrcode.js – 生成二维码的 jQuery 插件 FocusPoint.js 实现图片的响应式裁剪 DD_belatedPNG.js – 让IE6支持透明
一、 背景锁定与滚动条引起的抖动问题 浏览网页时经常会发现弹框出现后，滚动鼠标时，蒙版下面的页面还是可以滚动的，其实这些滚动都是没必要的，因为弹框的原意就是要聚焦用户的注意力。...因此我们要做的是 – 背景锁定(从技术角度其实是暂时性干掉滚动条)。...技术原理：当Dialog弹框出现的时候，根元素overflow:hidden. problem：此时，由于页面滚动条从有到无，页面会晃动，这样糟糕的体验显然是不能容忍了，于是，对元素进行处理...，右侧增加一个滚动条宽度（假设宽度是widthScrollbar）的透明边框。...二、避免弹框上再弹出弹框 要尽量避免在弹框上再弹一层弹框，2层蒙版会让用户觉得负担很重。可以改用轻量弹框或重新把交互梳理。
近日，在工作中遇到一个小问题(给手游平台做些网页活动，其中牵涉到一个按钮链接，就习以为常的用了标签，Click响应之后走一段js代码逻辑－弹出一个分享微信弹框。...Chrome和Android平台都没问题，测试阶段发现Ios平台出现了点问题～弹框闪现一下之后，页面被重新渲染了，自然弹框又被消隐掉了。)，经历一番查证，个中缘由原来如此。...A标签的点击事件运行时，如果页面内容很多，有滚动条时，页面不会乱跳，用户体验更好。...点击链接后也不会回到网页顶部。...这又不是多多语句，不写分号可能会出现意想不到的情况！
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
对象存储
云直播
