首页 > TAG信息列表 > 蒙层

蒙层禁止页面滚动的方案

蒙层禁止页面滚动的方案 弹窗是一种常见的交互方式，而蒙层是弹窗必不可少的元素，用于隔断页面与弹窗区块，暂时阻断页面的交互。但是在蒙层出现的时候滚动页面，如果不加处理，蒙层底部的页面会开始滚动，实际上我们是不希望他进行滚动的，因此需要阻止这种行为。当弹出蒙层时禁止蒙层下的页面

vue3--放大镜效果实现

1.调用useMouseElement函数，获取元素内鼠标移动的坐标。 // elementX ， elementY target元素范围内的坐标值。 2.定义left，top变量蒙层移动的距离 left=elementX-蒙层盒子宽度的一半 top=element-蒙层盒子高度的一半 3.watch()监控elementX ，elementY。控制移动范围， 监听元素内鼠标

移动端禁止蒙层下的页面滚动

禁止蒙层下的页面发生滚动 需要图片 很多时候，我们都需要让用户选择下拉框，选择对应的选项。 弹出蒙层的时候，竟然可以滚动蒙层下的页面 这是体验一点都不友好，所以我们需要优化一下。 弹出蒙层的时候，静止页面滚动哈 // 封装禁止页面滚动方法（该方法兼容PC端和移动端） var topSpace =

多层嵌套，导致蒙层失效了的解决方法

一、bug情况描述 在有蒙层的弹窗中嵌套弹窗（包含使用this.$confim  、 this.$prompt自带的蒙层）， 当我们点击弹出内嵌的弹窗时，外层弹窗的蒙层会被复用（此时这个蒙层层级在 外弹窗和内弹窗之间），且关闭内嵌弹窗后，蒙层不会消失（因为外层弹窗还需 要用到），但是这就造成了，外层弹窗被蒙层遮挡的

Vue3 -- teleport传送门

目录 teleport传送门例： 蒙层特效目标效果代码演示页面效果未使用teleport存在的问题使用teleport实现目标效果完整代码 总结 teleport传送门 Teleport 是一种能够移动 DOM到Vue根节点之外的技术。 例： 蒙层特效 目标效果 点击按钮这个页面显示一个满屏的半透明的黑色蒙

小程序蒙层滚动禁止穿透,在元素上面添加一个空函数catchtouchmove=preventTouchMove即可

1、小程序蒙层滚动防止穿透 <template> <view class="container" catchtouchmove="preventTouchMove"> </view></template><script>export default{ data(){ return{ } }, methods:{ //防止穿透 preventTouchMo

元旦-CSS蒙层

一、好久不见 最近有点小忙哟，元旦还在加班 二、添加蒙层

ios12以上微信内置浏览器键盘收起后空白问题及原键盘位置点击事件失效问题

机型：iphoneXr（ios 12+） 问题：1. 虚拟键盘收起后，键盘位置空白，body不会及时回落沾满全屏； 　　　2.虚拟键盘收起后，原来虚拟键盘位置的页面元素点击事件失效。 　　（只在微信内置浏览器里打开有以上问题，在原生浏览器里没有问题）   具体描述： 1. 整个页面是100vh，modal从页面底部弹起。键盘收

SDMask(iOS蒙层遮罩弹出引导)

SDMask介绍 地址     针对iOS项目，大部分弹出视图三方都把弹出内容作为了项目的一部分，这种耦合局限性较大。该项目对此解耦，围绕我何时需要使用蒙层而展开设计。将弹出内容和动画和事件完全分离出去让coder掌控，这样可以完全实现设计师的设计。     目前项目对以下需求进行蒙层

移动端 细节点

*{touch-action: none;//清除系统默认的手势事件} 弹性布局 常用代码 display: flex; flex-direction: column; justify-content: center; flex: 1; flex-direction: column; align-items: center; <meta name="viewport" content="width=device-width

轻松搞懂自定义蒙层引导原理

蒙层引导在我们项目中一直的做法都是让UI直接切一整张静态图，这样的做法虽然省事，但带来的后果就是适配性太差，还会出现引导图和下面真正的界面不符的情况，让用户感到莫名其妙。因此，就有必要自定义一个蒙层引导视图来解决这个问题。本篇文章主要是对核心原理实现的剖析。 核心原理分