1、单纯的关闭 window.opener.location.reload(); //刷新父窗口中的网页 window.close();//关闭当前窗窗口 2、...
(e){ e.returnValue=("确定离开当前页面吗?")...该事件可用于弹出对话框,提示用户是继续浏览页面还是离开当前页面。对话框默认的提示信息根据不同的浏览器有所不同,标准的信息类似 “确定要离开此页吗?”。该信息不能删除。...但你可以自定义一些消息提示与标准信息一起显示在对话框。注意: 在 Firefox 浏览器中,只显示默认提醒信息(不显示自定义信息)。...触发于: 关闭浏览器窗口 通过地址栏或收藏夹前往其他页面的时候 点击返回,前进,刷新,主页其中一个的时候 点击 一个前往其他页面的url连接的时候 调用以下任意一个事件的时候:click,document...当用window open打开一个页面,并把本页的window的名字传给要打开的页面的时候。 重新赋予location.href的值的时候。
不显示滚动条(css) ::-webkit-scrollbar { width: 0px; } 禁止页面滚动条(js) document.body.parentNode.style.overflowY...= "hidden"; $("body").parent().css("overflow-y","hidden"); 启用浏览器滚动条(js) document.body.parentNode.style.overflowY
有2种方式 1.通过Js处理滚动条 如果将元素拖动到可见区域之后,再去操作它,也就是处理这个滚动条。...滚动条不是html页面的元素,它是浏览器的元素。想获取浏览器的元素,就不能走常规套路啦,要通过javascript来执行。 不是所有的元素都一定要拖动到可见区域才能操作的。...例如百度搜索中,最后选择这个页面跳转: ? 例如底部的页面跳转:有的系统,虽然进来是这个地方,想操作页面底部的元素,可以操作,也不需要拖动滚动条,它会自动将它拖动到可见区域,然后去操作它。...10)如何判定这个页面需要不需要这种滚动操作呢? 如果你的被测系统某一个页面当中,因为太长了出现了滚动条,怎么做呢?...按照弹框里面去选,是件很复杂的事情,比较难搞定,很有可能通过率非常低就是因为日期框的原因,所以没必要,而且这种细节,手工测试的时候都已经测过了。
在web开发中,有时候我们需要实现在页面上点击某个按钮弹出窗口,并禁用页面滑动或滚动的需求。以下是我本人的做法,望大家多多提出意见或建议。 直接上代码: 移动端弹框禁止背景滑动 111</
需求 编写一个简单的页面弹框的示例,功能要求如下: 一个点击按钮,点击可以弹出一个弹框 弹框固定出现在页面的中间位置 需要写一个背景mask,用于遮掩背景,设置透明度0.3 点击弹框外的位置,弹框就可以消失不见...,可以使用fadeOut() 点击弹框内的文本框可以输入内容,弹框不会消失不见 点击弹框右上角的 × 号,则关闭弹框 看完了需求,首先快速写好一波html + css 编写基本html + css ?...好了,这里已经实现了点击显示的操作了,那么下一步要编写点击弹框的其他部分,则弹框隐藏。 编写点击弹框外部,则隐藏 ?...但是,此时点击弹框内也是会让弹框消失的,那如果我要填写弹框的input框来写内容,还没写就消失了,这该怎么办呢?...最后,编写弹框右上角的× 号,点击则隐藏弹框 因为现在点击弹框都不会隐藏,所以可以单独给#close写一个click()方法,设置触发fadeOut()事件。 ?
我们可以使用, catchtouchmove="ture" 属性,来禁止滑动。 注意,该属性只支持在真机上测试,模拟器上效果可能无法展示。...只需要在禁止滑动的标签上添加一个 catchtouchmove="ture" 属性即可,代码如下: /* js */ Page({ data: { isShow: true, } })
selenium页面交互过程,操作中常见需要点击某个元素,但是页面看不到该元素,需要滑动滚动条,滑到可见处,在进行下一步的操作,那么UI自动化中我们就是使用到execute_script方法进行实现,首先简单介绍一下滑动滚动条的常见语法...滚动条回到顶部 # js="var q=document.getElementById('id').scrollTop=0" driver.execute_script(js) # js="var q...=document.documentElement.scrollTop=0" driver.execute_script(js) 滚动条拉到底部 # js="var q=document.getElementById...js = "var q=document.documentElement.scrollTop=100000"dr.execute_script(js)'''#若要对页面中的内嵌窗口中的滚动条进行操作,要先定位到该内嵌窗口...,在进行滚动条操作 js="var q=document.getElementById('id').scrollTop=100000" driver.execute_script(js)'''t.sleep
前言: 项目有个需求是:跳转路由,在离开页面前,需要弹框询问用户是否确定离开。 用react-router的组件是可以的,但是,怎么使用antd组件(或者说自定义组件)呢?...medium.com/@michaelchan_13570/using-react-router-v4-prompt-with-custom-modal-component-ca839f5faf39) (4)在离开页面...,路由跳转时,自定义弹框拦截,并询问 handlePrompt = location => { if (!...> 保存 完美实现离开页面...,路由拦截的同时,显示自定义模态框!
window.close()在IE浏览器下,关闭窗口前会弹个确认框。通过下面的方法可以跳过确认框,直接关闭窗口。
ps:我偷懒直接js控制了行间样式,但标准写法应该是给body添加类名来控制 局限问题: body滚动后再触发弹层,会使body页面回滚到顶部。...关键代码: JS控制弹窗的交互、body的禁止滚动 ? css添加弹层的超出滚动效果 ? 局限问题: 弹层中内容滚动到顶部或底部后,还会连带页面body一起滚动。也就是还会发生穿透效果。...1、(需满足)弹层内容不需要滚动 解决方案: 当弹层出现的时候不需要再禁掉body的滚动效果了,我们可以从弹层方面入手,阻止弹框的touchmove事件的默认行为。...那么这时,就引来我们的主题难点,可以有以下几种思路解决: 四、body滚动 + 弹层内部滚动[js-检测touchmove的target] 简单粗暴,一针见血:谁能动谁动,谁不能动就禁止touchmove...但是同样的问题是,需要判断滚动到顶部和滚动到底部的时候禁止滚动。否则,就和第二条一样,触碰到上下两端,弹窗可滚动区域的滚动条到了顶部或者底部,依旧穿透到body,使得body跟随弹窗滚动。
laery.js 地址–http://layer.layui.com/ 2、引入laery.js 在此之前你必须要先引入jQuery1.8以上的任意版本 3、使用laery.open();function...: ‘我是标题’, shadeClose: true, content: [‘layer_model.html’,’no’] }); } 基础参数 1. type 类型type: 1, // 0(信息框,...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 遮罩 即弹层外区域。
前言 最近在写插件的过程中,需要使用 JS 判断是否有滚动条,搜了一下,大致方法都差不多,但都有些啰嗦,代码不够简洁。最终通过参考不同方法,写了一个比较简单的方法。...判断滚动条的需求在弹窗插件中用的较多,因为弹窗大多会添加 overflow: hidden 的属性,如果页面比较长的话,添加这个属性之后页面会有晃动。...判断是否有滚动条的方法 其实只需要一行 JS 就可以,测试兼容 IE7 function hasScrollbar() { return document.body.scrollHeight >...计算滚动条宽度的方法 还是以弹窗为例,因为 IE 10 以上以及移动端浏览器的滚动条都是不占据页面宽度的透明样式(其中 IE 10 以上浏览器可以通过 CSS 属性还原原始的滚动条样式),所以为了进一步增强用户体验...scrollDiv.clientWidth; document.body.removeChild(scrollDiv); return scrollbarWidth; } 总结 使用 JS
所谓“内滚动布局”,顾名思义就是主滚动条在页面内部的布局,是相对于传统的滚动而言的,例如,下图所示滚动条,是从头部下方开始: 传统的页面滚动,基本上是相对于整个浏览器窗体,例如,QQ视频首页...无法滚动的弹出层 基本上,是个像样的web2.0网站都会有弹框web组件,一个黑色半透明的overlay层,上面摇曳着弹框面板,例如这样的: 对于黑色半透明覆盖层,传统实现是这样的:如果要兼容IE6浏览器...不过这也没什么,对吧,弹框出现时候,页面背景没法滚也挺好的。 但是,麻烦的事情是,如果弹框自身高度很高,却又没法滚动呢(浏览器可用高度700像素,弹框有900像素高)?...传统布局下的弹框,如果高度很高,直接设置弹框容器position:absolute就可以愉快地上下翻滚了。但是,在内滚动布局下,弹框根本就不在滚动容器里面,翻滚一说从何谈起? 大危机!怎么办!?...基本上,90%+的弹框组件,半透明覆盖层overlay和弹框dialog是两个并列的兄弟关系的独立的元素,这种设计的好处在于overlay组件可以复用。
最新项目使用网页加载页面的基本上都由UIWebView转到WKWebView了,然后刚刚才发现用了WKWebView之后不会弹窗提示了,查了一下知道原来WKWebView默认禁止了下面的跳转: 打开itunes.apple.com...跳转到App Store, 拨打电话, 唤起邮箱等一系列操作 JS的Alert,Confirm,TextInput弹框 解决方法: 首先实现WKUIDelegate代理方法 解决唤不起打电话和跳转系统应用的方法...的Alert,Confirm,TextInput不弹框的方法 #pragma mark - Alert弹窗 - (void)webView:(WKWebView *)webView runJavaScriptAlertPanelWithMessage...[self presentViewController:alertController animated:YES completion:nil]; } #pragma mark - Confirm弹框...self presentViewController:alertController animated:YES completion:nil]; } #pragma mark - TextInput弹框
所谓“内滚动布局”,顾名思义就是主滚动条在页面内部的布局,是相对于传统的滚动而言的,例如,下图所示滚动条,是从头部下方开始: ?...无法滚动的弹出层 基本上,是个像样的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; } /*新增弹框头部
一、 背景锁定与滚动条引起的抖动问题 浏览网页时经常会发现弹框出现后,滚动鼠标时,蒙版下面的页面还是可以滚动的,其实这些滚动都是没必要的,因为弹框的原意就是要聚焦用户的注意力。...因此我们要做的是 – 背景锁定(从技术角度其实是暂时性干掉滚动条)。...技术原理:当Dialog弹框出现的时候,根元素overflow:hidden. problem:此时,由于页面滚动条从有到无,页面会晃动,这样糟糕的体验显然是不能容忍了,于是,对元素进行处理...,右侧增加一个滚动条宽度(假设宽度是widthScrollbar)的透明边框。...二、避免弹框上再弹出弹框 要尽量避免在弹框上再弹一层弹框,2层蒙版会让用户觉得负担很重。可以改用轻量弹框或重新把交互梳理。
假设弹框本身有滚动条,页面因为超出一屏又有一个全局滚动条,那整个滚动体验就会变得很差。...弹框特性: – 较页面轻,可以更快回到之前的页面 – 相对独立,可以完全不影响页面的布局 – 适合解决简单,一次性的操作 以下列出了一些较适合使用弹框的场景及案例: 1.新手引导 第一感觉是非常重要的。...腾讯企点的提示弹框整理 几个容易被忽视的弹框细节 1.背景锁定与滚动条引起的抖动问题 浏览网页时经常会发现弹框出现后,滚动鼠标时,蒙版下面的页面还是可以滚动的,其实这些滚动都是没必要的,因为弹框的原意就是要聚焦用户的注意力...此时,由于页面滚动条从有到无,页面会晃动,这样糟糕的体验显然是不能容忍了,于是,对元素进行处理,右侧增加一个滚动条宽度(假设宽度是widthScrollbar)的透明边框。...Dialog隐藏的时候再把滚动条放开。 2.避免弹框上再弹出弹框 要尽量避免在弹框上再弹一层弹框,2层蒙版会让用户觉得负担很重。可以改用轻量弹框或重新把交互梳理。
领取专属 10元无门槛券
手把手带您无忧上云