id="form1" runat="server"> 在一个层上添加一个遮罩层的实现...: 实现原理:就是在要添加遮罩层的层上里面添加一个层,让该层撑满整个层即可 具体实现要求说明:在要添加遮罩层的位置必须是相对的位置...:psotion:relative 遮罩层的位置必须是绝对的:postion:aasolute;width:100%;heigth:100%;top:0px;left...:0px; ... <script type="text/javascript
>,在loadDiv(text)中,剔除出来 //调用LayerShow(text),text为参数,可以写入想要写入的提示语 //本方法在调用时会自动生成一个添加到body的div,并且会在调用隐藏遮罩层...LayerHide()时删除div //封装遮罩层div显示效果 //将其放在页面的div中加载 function loadDiv(text) { var div = "关闭"; return div; } //触发遮罩层...deWidth - $("#_wait_").width()) / 2 + "px", top: (deHeight - $("#_wait_").height()) / 2 + "px" }); } //隐藏遮罩层
当做弹窗效果时,希望弹窗出现的时候网页不可再上下滚动、翻页,可以用body{overflow:hidden},可是做手机站的时候,就不兼容了。
不显示滚动条(css) ::-webkit-scrollbar { width: 0px; } 禁止页面滚动条(js) document.body.parentNode.style.overflowY...= "hidden"; $("body").parent().css("overflow-y","hidden"); 启用浏览器滚动条(js) document.body.parentNode.style.overflowY
layui弹出层的使用方法:首先引入jQuery1.8以上的任意版本;然后引入laery.js;最后通过“function show(){var a = layer.open({…});}”方式使用laery.open...laery.js 地址–http://layer.layui.com/ 2、引入laery.js 在此之前你必须要先引入jQuery1.8以上的任意版本 3、使用laery.open();function...iframe出现滚动条,你还可以content: [‘http://sentsin.com’, ‘no’] }); 示例: 3.3.如果是用layer.open执行tips层layer.open({...){ //右上角关闭回调 //return false 开启该代码可禁止点击该按钮关闭 } }); 6, shade 遮罩 即弹层外区域。...是否点击遮罩关闭 默认:false 如果你的shade是存在的,那么你可以设定shadeClose来控制点击弹层外区域关闭 发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn
jQuery遮罩很容易实现,遮罩弹出后最好是要禁止页面滚动。 下面就写一个简单的遮罩,和禁止页面滚动的实例。...HTML: 显示遮罩层 隐藏遮罩层 CSS: .mask { position: absolute; ...alpha(opacity=60); //IE透明度 opacity:0.5; //Chrome -moz-opacity:0.5; //fireFox } jQuery: //显示遮罩层...function hideMask(){ $("#mask").hide(); } 禁止滚动: #禁止浏览器滚动条滚动: $('body').css({ "overflow":"
,文本的大小会重新计算,进行相应的缩放,当我们不需要这种情况时,可以选择禁止: html { -webkit-text-size-adjust: 100%; } 禁止选中内容 如果你不想用户可以选中页面中的内容...遮罩层滚动问题 在有遮罩层的情况下,遮罩层下方的内容依然可以透过遮罩层滚动,因此要取消这种操作 (function(){ var scrollTop = 0; // 显示弹出层...document.body.style.top = -scrollTop + "px"; stop() }) //关闭遮罩层 $('.close').click((...document.documentElement.style.position = 'fixed'; document.body.style.overflow = 'hidden'; //隐藏滚动条...; } /**遮罩层消失滚回到原来的位置**/ function to(scrollTop) { document.body.scrollTop = document.documentElement.scrollTop
message/notify/popover) layerStyle 自定义弹窗样式 icon toast图标(loading | success | fail) shade 是否显示遮罩层...shadeClose 是否点击遮罩时关闭弹窗 lockScroll 是否弹窗出现时将 body 滚动锁定 opacity 遮罩层透明度 xclose 是否显示关闭图标 xposition...this.restore(); } else { // 最大化 this.full(); } }, // 点击遮罩层...隐藏滚动条避免页面移位参考了饿了么隐藏滚动条功能。...只需设置drag: '#元素ID' 或者设置drag: false来禁止弹窗拖拽功能。 设置dragOut: true窗体可以自由拖拽到浏览器外部。
javascript弹出遮罩层弹出提示 * {margin:0;padding:0;font-size:12px … jquery 弹出遮罩层 点击层关闭 在Flash动画中,遮罩主要有两种用途: 一个作用是用在整个场景或一个特定区域...,使场景外的对象或特定区域外的对象不可见; 另一个作用是用来遮罩住某一元件的一部分… jquery.blockUI.js” type=”text/javascript”> //=========遮罩层...cn/eg/eg11/zhuce.html 效果图: 源代码如下: quot… 网上收集到几个JS遮罩层效果,可以实现图片弹出、背景变色,类似于windows关机效果,具体的JS如下: 1.Thickbox...在web項目中,有些頁面需要彈出對話框后對某部份進行遮罩,下面這個方法可以對某個定區域進行遮罩處理 /* begin遮罩层代码 /* 半透明的遮罩层 */ #overlay { background...解决弹出层定位滚动条scrollTop不兼容问题,即弹出层后滚动条不允许回到最上面,而是停在当前可见区域。
-webkit-appearance: none; ---- 11、想在Android里H5页面touch时没有蓝色的边框与遮罩,怎么办?...//ios用户点击一个链接,会出现一个半透明灰色遮罩, 如果想要禁用,可设置-webkit-tap-highlight-color的alpha值为0去除灰色半透明遮罩; //android用户点击一个链接...//滚动条轨道 ::-webkit-scrollbar-button //滚动条轨道两端按钮 ::-webkit-scrollbar-track-piece //滚动条中间部分,内置轨道 ::...(b)android 4.x bug //1.三星 Galaxy S4中自带浏览器不支持border-radius缩写 //2.同时设置border-radius和背景色的时候,背景色会溢出到圆角以外部分...iframe(阻塞父文档onload事件) //2.禁止使用gif图片实现loading效果(降低CPU消耗,提升渲染性能) //使用CSS3代码代替JS动画; //开启GPU加速; //使用base64
有2种方式 1.通过Js处理滚动条 如果将元素拖动到可见区域之后,再去操作它,也就是处理这个滚动条。...例如底部的页面跳转:有的系统,虽然进来是这个地方,想操作页面底部的元素,可以操作,也不需要拖动滚动条,它会自动将它拖动到可见区域,然后去操作它。...第一个参数是javascript脚本,你即将执行的js语句,第二个是参数可以传多个。 3)JavaScript脚本中用什么东西来接收外部传进来的参数呢? js语句有时候是不是要接受外部的参数?...这个arguments,来接收外部传进来的参数。 4)外部传进来的参数可能传了一个两个三个。...有的时候网页是有遮罩层: ? 这条区域线才是顶部: ? 9)一般用底部? 如果系统没有遮罩层,随便用,有遮罩层就只能用底部。 一般来说,会用顶部,默认的不传参,情非得已的情况下才会传参。
后面应用及其广泛,搭配JS可以做很多的网页特效. 原图 隐藏后 2.visibility可见性 visibility属性用于指定一个元素应可见还是隐藏....属性值 描述 visible 不剪切内容也不添加滚动条 hidden 不显示超过对象尺寸的内容,超出的部分隐藏掉 scroll 不管超出内容与否,总是显示滚动条 auto 超出自动显示滚动条,不超出不显示滚动条...下面做一个土豆网的案例 当鼠标经过时,显示遮罩层和播放图标 这时就要用到我们的隐藏和显示知识了,遮罩层应该是整个盒子的一个子元素,不占有位置,因此要使用绝对定位,而元素的隐藏使用的是display.../images/arr.png) no-repeat center; } /* 这里是让鼠标经过.tudou这个盒子时让mask遮罩层显示出来 而不是.mask:hover.../images/tudou.jpg" alt=""> 关于鼠标经过时的效果,使用伪类hover时一定要注意,是将鼠标移动到大盒子时才出现遮罩层,
,不过是移动设备对页面 做了缩小优化,所以字体等都相应缩小了 (980px是相对于手机像素的,我的是超过1000px多一些就出现滚动条了,这个没具体研究)。...假如你 tap一个弹出层元素(这个元素遮罩了一个 a标签),这个元素立即消失,这样由于上述的 0.3s延迟 tap事件就会传递给 a标签成 click事件造成a标签跳转。...以上面的例子来说,解决方案视情况而定: ① tap时让遮罩渐隐消失,这个过程超过 400ms就不会穿透到下一层去了 ② 在 touchend事件回调中加入 preventDefault, 并在下一层中加上...(这个没用过) ③ 有的时候比如弹出一个 iphone上滑动出来的层,点击黑色半透明区域弹出层消失,这种可以在黑色区域绑定 touchend也是和 tap差不多的效果 7.当弹窗出现时,想禁止屏幕的滑动...,给那个遮罩层添加 touchmove事件即可,用 e.preventDefault()会阻止的 scroll, click等事件,消失时再 off掉, $(".body_cover").on("touchmove
什么是滚动穿透 如图所示,有一层遮罩蒙层覆盖在body上时,当我们滚动遮罩层,它下面的内容也会跟着一起滚动,看起来好像是上面的滚动事件穿透到下面的DOM元素上一样,我们称之为滚动穿透。...viewport的滚动,那么我们给 body上加个 overflow:hidden,让整个body变成不可滚动的元素: html, body { overflow: hidden;} 这个想法很美好,在不侵入JS...的情况下禁止滚动,然而: 只加 overflow:hidden对移动端是无效的!...(请注意蒙层出现时,底部列表发生的变化) 在这个交互过程中,浮层弹出时,底部列表首先滚动条被置为初始态,关闭浮层后重置为之前的记录位置。...实际上浮层的弹出背景是有一次跳变。 这种方案实现简单,若认为重置滚动条的跳变无伤大雅的情况下可以优先采用此方案。 阻止body的默认滚动?
$loading遮罩使用 1、 遮罩是什么 在Vue.js组件库element-ui中,遮罩(mask)是一个用于遮盖页面某一部分的半透明层,通常用于在页面加载、弹窗等情况下禁止用户与页面进行交互。...element-ui中的遮罩(mask)通常与其他组件一起使用,比如在使用this.$loading方法显示加载指示器时,会自动添加一个遮罩层,禁止用户与页面进行交互。...当Dialog组件显示时,会自动添加一个遮罩层,禁止用户与页面进行交互,使得用户只能与Dialog组件进行交互,从而达到弹窗的效果。...2、遮罩怎么使用 在Vue.js组件库element-ui中,可以通过调用this.$loading方法来显示一个加载指示器和遮罩层。具体的代码示例如下: // 在Vue组件中调用this....其中,lock属性控制是否禁止背景滚动,text属性设置加载文本提示,spinner属性设置加载图标类型,background属性设置遮罩层背景颜色。 当调用this.
背景: 弹层里边有可滚动区域时,在移动端的坑我就不多说了。 找了很多解决滚动穿透的方案,最终都不能完美解决。 一气之下自己js撸了一个。 效果图: ?...原理: 1、解决滚动穿透:通过给弹层绑定touchmove和mousewheel事件,取消默认行为实现。
在移动端中,如果我们使用了一个固定定位的遮罩层,且其下方的dom结构的宽度|高度超出屏幕的宽度|高度,那么即使遮罩层弹出后铺满了整个屏幕,其下方的dom结构依然可以滚动,这就是大家所说的“滚动穿透”。...关键代码: JS控制弹窗的交互、body的禁止滚动 ? css添加弹层的超出滚动效果 ? 局限问题: 弹层中内容滚动到顶部或底部后,还会连带页面body一起滚动。也就是还会发生穿透效果。...关键代码: js控制弹窗的交互、弹窗的禁止滚动 ? 局限问题: 因为touchmove被禁掉了,就会造成弹窗内部所有位置都不能响应touchmove事件,效果上就是弹窗内部不能再滚动了。...那么这时,就引来我们的主题难点,可以有以下几种思路解决: 四、body滚动 + 弹层内部滚动[js-检测touchmove的target] 简单粗暴,一针见血:谁能动谁动,谁不能动就禁止touchmove...但是同样的问题是,需要判断滚动到顶部和滚动到底部的时候禁止滚动。否则,就和第二条一样,触碰到上下两端,弹窗可滚动区域的滚动条到了顶部或者底部,依旧穿透到body,使得body跟随弹窗滚动。
%>/extJs/resources/css/ext-all.css"> /extJs/ext-all.js...layout: 'fit',//填充布局 //activeItem:0,//默认激活itmes中的第0个项目 autoScroll:true,//容器过高或者过宽时,窗体自动显示滚动条...//constrainTo : Ext.getBody(),//设置窗体只能在body部分 //disabled : false,//禁用 //draggable : false,//禁止拖动...: '500',//最大宽度 //minHeight : 500,//最小高度 //minWidth : 300,//最小宽度 modal : true,//显示遮罩层
两种调用方法: 1、引用独立的layer.js文件 引入好layer.js后,直接用即可 layer.msg('hello...//layero 为 弹出层对象 //在回调函数末尾添加 “return false”可以禁止点击该按钮关闭弹出层 return...: 0 12、shadeClose-是否点击遮罩关闭 类型:Boolean,默认false 如果shade存在,那么设置shadeClose:true可以使得点击遮罩关闭弹出层 13、time-自动关闭所需毫秒...(layero); } 20、scrollbar-是否允许浏览器出现滚动条 类型:Boolean,默认:true,默认允许浏览器滚动 如果设定scrollbar: false,则屏蔽,即使浏览器存在滚动条...还可以配置设定move: false来禁止拖拽 24、moveOut-是否允许拖拽到窗口外 类型:Boolean,默认:false 默认只能在窗口内拖拽,如果你想让拖到窗外,那么设定moveOut: true
我们先来看看结构: 样式: JS: 先获取元素: 先搞定两个简单的事件,鼠标在预览图上时就显示遮罩层和大图,否则隐藏 这个地方一定要注意是给preview-img这个盒子加事件而不是...preview下面的那个img,因为mask不在img里,无法捕获冒泡,所以当图片上遮罩出现时,就会一直频闪.而加在preview-img上的话就可以冒泡,鼠标放在图片上或者遮罩层上都会有效果....接下来就是比较困难的地方了: 下面得到的是遮罩层距预览图左侧和顶部的距离 maskX就是遮罩层在盒子中的left值,是怎么得来的呢,我来分析一下: 所以说要减去mask本身宽度和高度的一半...: 现在我们的遮罩层实现了移动,但是这样的话当我们鼠标到了边缘的时候,整个遮罩层也会跟着出去怎么办呢?...我们现在给这个盒子加一个滚动条(div {overflow: auto}),看看scrollTop的用法: 我们现在添加一个事件看看scrollTop打印出来的是什么: 可见scrollTop
领取专属 10元无门槛券
手把手带您无忧上云