遮罩层

vue 遮罩层阻止默认滚动事件 vue中提供 @touchmove.prevent 方法可以完美解决这个问题 <div class="dialog" @touchmove.prevent ></div> 如果不是使用Vue的话，可以给body添加overflow:hidden属性解决 文章来源: https://blog.csdn.net/learn8more/article/details/92011171

项目遇到的问题 移动端项目，css设置遮罩层，遮罩层有纵向滚动条，触摸滑动遮罩层，遮罩层下面的区域也一起滑动。 解决方法 1.如果遮罩层也不需要响应滑动。直接在遮罩层上面使用vue的“阻止默认事件”：@touchmove.prevent 2. 遮罩层有滚动条，也需要响应滑动。在遮罩层出现的时候给遮罩层下面的区域css样式实现绝对定位，定在页面中，遮罩层消失的时候。移除样式。 css 样式： 文章来源: https://blog.csdn.net/weixin_43790802/article/details/91429837

<! DOCTYPE html > < html lang = "en" > < head > < meta charset = "UTF-8" /> < meta name = "viewport" content = "width=device-width, initial-scale=1.0" /> < meta http-equiv = "X-UA-Compatible" content = "ie=edge" /> < title > Document </ title > < style > body { background-color : #000000 ; } ul , li { list-style : none ; padding : 0 ; margin : 0 ; } .div1 { position : fixed ; left : 0 ; right : 0 ; top : 100px ; margin : 0 auto ; width : 345px ; height : 256px ; background : #ffffff ; border-radius : 5px ; overflow : hidden ; z-index : 100 ; } .line { width : 343px ; border : 1px dashed

前言： 此放大镜可直接改变图片（我是用的是zoom.jpg）使用。前提是必须跟我一样的布局，不然里面的clientX和offsetLeft得作出相应改动。 前提先了解数学算法： 求遮罩层mask宽度 大图、大图显示区、小图、遮罩层 1、小图是大图等比缩放的 2、遮罩层是大图显示区缩放的 小图/大图 = 遮罩层/大图显示区 遮罩层 = 大图显示区*(小图/大图); ------------------------------------------------ 大图活动区 = 大图-大图显示区 小图活动区 = 小图-遮罩层 遮罩层偏移量/小图活动区 = 大图偏移量/大图活动区 大图偏移量 = 大图活动区*(遮罩层偏移量/小图活动区) 大图偏移量 = (大图-大图显示区)*(遮罩层偏移量/(小图-遮罩层)) 分解动作： 1、布局 2、计算遮罩层宽高度 3、为small绑定移入移出事件处理 4、为small绑定鼠标移入事件处理 4.1、计算mask的偏移量 (e.clientX-zoom.offsetLeft-zoom.clientLeft-mask.offsetWidth/2) 4.2、规定mask的最大最小偏移量 4.3、计算大图偏移量(参照公式) 注意事项： 1、鼠标移入和鼠标移动事件应该加给small 2、offsetX/offsetY 值不准确，应该使用clientX

1.放一个空div，作为遮罩层最外层 <view class='mask' v-if="{{flag}}"></view> 2.写这个遮罩层样式 .mask{ width:100%; height:100%; position:absolute; background-color:#999; z-index:9999; top:0; left:0; opacity:0.5; } 其中颜色可以任选，透明度也可以任选。 兼容处理： -moz-opacity: 0.7; opacity: 0.70; filter: alpha(opacity=70); 3.控制显示还是隐藏 用v-if或者hiddle的true和false来控制遮罩的显示或者隐藏，当flag设置为false时，隐藏；为true时，显示 // 遮罩层显示 show: function () { this.setData({ flag: false }) }, // 遮罩层隐藏 conceal: function () { this.setData({ flag: true }) }, 来源： https://www.cnblogs.com/jessie-xian/p/11571642.html

是通过css解决这个问题,核心css代码如下: .modal-backdrop { filter: alpha(opacity=0)!important; opacity: 0!important; } alpha和opacity通常是决定透明度。 alpha和opacity区别是什么? 相同点: 都是值为0表示完全透明，值为1表示完全不透明。 不同点: alpha可以应用元素特定的属性，只能作用于当前元素，其子元素不能继承，而opacity不仅仅作用于当前元素，也会影响子元素及其子子元素，具有继承性。 来源： https://www.cnblogs.com/youcong/p/11440604.html

1、CSS样式 1 <style type="text/css"> 2 body { font:11px/1.6em Microsoft Yahei; background:#fff; line-height:1.6em; outline:none;} 3 html,body,div,ul,ol,li,p,iframe,h1,h2,dl,dt,dd { margin:0; padding:0;} 4 .mask { width:100%; height:100%; background:rgba(0,0,0,0.6); display:none; position:fixed; _position:absolute; top:0; left:0; z-index:99;} 5 .dialog { min-height:120px; background:#fff; display:none; position:fixed; top:8%; left:50%; z-index:100; box-shadow:3px 3px 5px #000;} 6 .dialog a.close { display:block; width:22px; height:22px; background:url(images/close.png) center no-repeat #fff; text

vue中提供 @touchmove.prevent 方法可以完美解决这个问题。 <div class="child" @touchmove.prevent ></div> vue同时还提供了其他的修饰符： 阻止单击事件继续传播 ： <a v-on:click.stop="doThis"></a> 提交事件不再重载页面 ： <form v-on:submit.prevent="onSubmit"></form> 修饰符可以串联 ： <a v-on:click.stop.prevent="doThat"></a> 只有修饰符 ： <form v-on:submit.prevent></form> 添加事件监听器时使用事件捕获模式， 即元素自身触发的事件先在此处理，然后才交由内部元素进行处理 ： <div v-on:click.capture="doThis">...</div> 只当在 event.target 是当前元素自身时触发处理函数 ，即事件不是从内部元素触发的 ： <div v-on:click.self="doThat">...</div> 来源： https://www.cnblogs.com/myfate/p/11414433.html

原因是因为： 　　touchmove事件冒泡； 解决方案: 　　阻止遮罩层冒泡，在小程序里面 利用catch+事件名就可以阻止冒泡， 　　所以 在遮罩层填上事件 　　　　catchtouchmove="preventdefault" 　　小程序1.5.0后可以写上 　　　　capture-catch:touchmove="preventdefault" 完美 哈哈； 来源： https://www.cnblogs.com/wang-xx/p/11405537.html

css如何实现鼠标移至图片上显示遮罩层及文字 问题：一张图片当鼠标移动到上方时，会显示一个遮罩层，并且显示一些提示文字 html: < div class = "contentimg" > < span class = "img_content" > < a href = "http://www.eltran.cc/" target = "view_frame" > < img src = "./assets/img/图片路径.jpg" alt = "" > < span class = "mask" > 河北亚创天然气股份有限公司 </ span > </ a > </ span > </ div > css: 其中要注意的是img_content样式里定义了position: relative;这个主要是为了让我们的遮罩层做绝对定位做准备的。 .contentimg img { width : 235 px ; height : 100 px ; } .contentimg .img_content { position : relative ; padding : 0 ; width : 235 px ; height : 100 px ; } .contentimg .img_content .mask { position : absolute ; top : - 36