文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    点击遮罩层的背景关闭遮罩层（HTML）

    在模仿华为官方网页的练习当中我发现华为官网中有一个遮罩层是随便点击遮罩层的背景也能关闭掉遮罩层，但唯独点击内容区域不会关闭掉遮罩层。...于是我开始模仿这个写案例，连内容也一模一样（因为这个练习就是要写出和华为关一样的效果或则比它更好的效果），一开始我是这样子写的（图1） 图1 class=Select_Region_bj 我给了一个灰色半透明的背景样式...，后来在Javascript中写onclick事件无论这么写，点击内容区也是会关闭掉遮罩层。...我百思不得其解到底怎么样写才能点击内容区不会关闭遮罩层，后来下课期间我看见我同学他写的带能点击内容区不会关闭遮罩层。我问他你是这么写的，他告诉我：“把他们分离就可以的了。”我思考了一会，脑补：分离？...分离写（图2） 图2 把背景层和内容区分开来写，不要在背景层中包裹内容，这样子点击内容区就不会关闭掉遮罩层了！

    4.1K30

    mask遮罩层的华丽写法

    mask遮罩蒙层使用通常的写法的bug 通常写法pug .mask 通常写法css .mask{ position: absolute; top: 0; right: 0; bottom: 0; left...起初想的解决是，mask出现的时候不让页面滚动？ 倒也不是不可以，但是万一人家刚好移动了一点点再点击调出蒙层呢？不也还是露怯么！属于治标不治本型的。...也不行 不知道是不是css是rem而我设置px的原因 反正都没解决 但是js动态设置高度后，我无意识的将position:absolute;改成了position:fixed; 妈耶效果好了！...起初还以为是js起作用了，还想小小开心庆祝下我的机智 后来转念一想，高度设置了下边也是露一块啊，为什么蒙层却完美贴合了呢？!...所以肯定另有玄机 我就把js删掉，发现果真对人家没什么影响，还是那么完美的贴合。 刚就改了两个地方，于是，我把目光瞄准了css 尼玛，原来就是fixed和absolute的区别啊！

    2.2K20

    js - 移动端的超出滚动功能，附带滚动条，可解决弹层中滚动穿透问题。

    背景: 弹层里边有可滚动区域时，在移动端的坑我就不多说了。 找了很多解决滚动穿透的方案，最终都不能完美解决。 一气之下自己js撸了一个。 效果图： ?...原理： 1、解决滚动穿透：通过给弹层绑定touchmove和mousewheel事件，取消默认行为实现。...2、取消默认行为后不能滚动：给需要滚动展示的区域绑定touchstart、touchmove和mousewheel事件，监听触发区域的Y值，对应修改可滚动区域的translateY值，实现滚动效果。...} 47 $(this).css('transform', `translate(0px, ${transY}px)`); 48 /* 移动时，滚轮的变化监听...let y = e.originalEvent.deltaY; 70 if (y > 0) { 71 /* 向下翻滚轮 wheelDeltaY的值与之相反

    8.4K10

    iOS第三方弹层KLCPopup的使用

    很多时候使用一个弹层来提供一个小界面进行提示、选择什么的功能是很有用而且美观的，比如很多广告就是这种弹层的形式...有了弹层以后，我们不需要每次要显示一个东西的时候都跳转到另一个界面中去，当只用显示一点小东西的时候...，弹层的价值远远大于新开一个界面，之前使用到了第三方的弹层KLCPopup，当时的需求是要能在弹层上填写内容以及添加按钮，试了几种弹层后发现这种最能满足需求也挺好用的，于是就用了下来，这里说一说简单的使用方式吧...第五个参数dismissOnBackgroundTouch，参数是布尔型的，决定当你点击下方界面时，也就是点击弹层界面以外的部分时，是否退出弹层。...创建弹层的过程到这里就结束了，基本上要显示什么，怎么出现怎么退出，什么时候退出都已经决定好了，接下来显示弹层就好了： [popupView show]; 这样就可以显示刚才创建好的弹层了。...弹层出现后，除了刚才设定的点击背景或弹层本身时退出弹层外，也可以设定在其他时候退出，比如点击弹层上的一个按钮时调用方法退出，只要在点击按钮时运行： [popupView dismiss:YES];

    76420

    【微前端】：Why Not Iframe

    iframe 最大的特性就是提供了浏览器原生的硬隔离方案，不论是样式隔离、js 隔离这类问题统统都能被完美解决。...但他的最大问题也在于他的隔离性无法被突破，导致应用间上下文无法被共享，随之带来的开发体验、产品体验的问题。 url 不同步。浏览器刷新 iframe url 状态丢失、后退前进按钮无法使用。...UI 不同步，DOM 结构不共享。想象一下屏幕右下角 1/4 的 iframe 里来一个带遮罩层的弹框，同时我们要求这个弹框要浏览器居中显示，还要浏览器 resize 时自动居中.....全局上下文完全隔离，内存变量不共享。iframe 内外系统的通信、数据同步等需求，主应用的 cookie 要透传到根域名都不同的子应用中实现免登效果。 慢。...每次子应用进入都是一次浏览器上下文重建、资源重新加载的过程。

    1.4K10

    用flutter给图片加个好看的遮罩层【flutter20个实例之六】

    每个图片底部有个一定高度的遮罩层，用来放一些文字 2.看看这个布局的主内容 body里面的列表内容 右上角点击后调用了bottomModal组件 @override Widget build(..., ), ], ), //这个是顶部tab样式，如果不需要可以去掉 body: monthList()); } 3.底部弹框其实就是个...的布局排列 InkWell：为每个图标增加个点击事件 由于底部弹框也相当于一个页面，所以想要里面的select选择后内容跟着变动，就需要重定义setState() 4.核心内容列表就是一个GridView...return _itemGrid(index); }, itemCount: _list.length, ), ), ); 5.主要是遮罩层的讲解...这里是一个stack，通过两个组件的堆叠实现，外层要设一个颜色透明度 属性要设置自动撑满，这样组件的遮罩层才会自动撑满父组件宽度 fit: StackFit.expand 然后要设置一个颜色透明度 decoration

    4.9K30

    滚动穿透的6种解决方案【已自测】

    在移动端中，如果我们使用了一个固定定位的遮罩层，且其下方的dom结构的宽度|高度超出屏幕的宽度|高度，那么即使遮罩层弹出后铺满了整个屏幕，其下方的dom结构依然可以滚动，这就是大家所说的“滚动穿透”。...关键代码： JS控制弹窗的交互、body的禁止滚动 css添加弹层的超出滚动效果 局限问题： 弹层中内容滚动到顶部或底部后，还会连带页面body一起滚动。也就是还会发生穿透效果。...这段逻辑代码如下： 三、body滚动 + 弹层无滚动[js-阻止弹层中touchmove的默认行为] 适用场景：   1、（适用）body可滚动   2、（适用）触发弹层出现的按钮可以在任意位置 需满足以下条件...六、body滚动 + 弹层内部滚动[css+js-记录滚动位置] 换个脑子，回到最初 寻找新的思路。 不从弹层上入手，也就是不禁掉弹层的touchmove默认事件。...这时，我们可以通过记录用户打开弹窗前所滚动页面的位置，在弹层展开的时候赋给body在css中的top值，等关闭弹层的时候，再把这个值赋值给body在js中的scrollTop值，还原body的滚动位置。

    15.2K31

    国标视频云服务EasyGBS自定义通道名称弹框层级优化

    EasyGBS是一个开放性的平台，平台提供了丰富的二次开发接口，用户可以自由选择不同的接口调用并集成到自己的平台上，操作简单方便。...EasyGBS拥有直观的层级显示，一级目录、二级目录、多级目录的选择都可以直接通过树状图进行选择。 image.png 本次EasyGBS平台的更新中扩展了自定义通道名称的功能。...我们在前端的实现方式是通过弹框出现通道名称的修改框。但是在EasyGBS的选择通道界面，我们已经有了一个弹框出来，因此自定义通道名称只能再增加一个弹框。...实际操作发现，原本在前一个弹框上的遮罩层出现在了最新一层弹框上，因此需要对该问题做优化。...image.png 经过对前端的排查我们发现，是由于给el-dialog的父元素添加z-index属性，没有遮罩层的层级大，因此导致遮罩层显示在最上方，盖住了自定义通道名称的层级。

    60930

    关于Layer web弹层组件的加载(loading)层位置居中问题

    最近在项目中一直使用layerui的相应的提示框以及它的加载层，然而就在今天遇到了一个神奇的问题，我使用 var index = layer.load(0, {shade: false}); 结果一直偏左无法居中...，也不知道什么原因，然后自己给它设置居中 offset设置top和left的偏移位置 layer.load(0,{ offset: ['50%', "50%"], shade: false }); 或者是...); var index = layer.load(1, { offset: ['50%', wdithpx], shade:false }); 最后想推荐大家可以了解下layui这个开箱即用的前端...Web框架，对于我们这些后端开发而言这真的是福音，并且并且样式也比较的大气美观（说明：没有打广告的意思，只是认为真的比较适合我们这些后端人员）。...Layer Web弹出层组件地址：https://layer.layui.com/ Layui前端框架地址：https://www.layui.com/

    2.1K10

    iOS App不弹框询问“是否允许应用访问数据”的问题

    问题及解决过程 1、一般情况下，App首次启动都会弹出一个询问用户“是否允许应用访问数据”的弹框； 2、偶尔的一次调用厂家的静态库，库里面需要访问服务器做一些操作，但是App死活就是不弹框提示网络访问请求...，并且“设置“里面也没有设置该App访问网络的地方，设置首页、无线局域网和蜂窝移动网络三处都没有显示该App，也就是都不可设。...3、尝试了网上说的各种方法，什么重启手机、Info.plist添加App Transport Security Settings、打开无线局域网助理、修改其他App的网络访问权限等等，都不管用。...4、后来，我用NSURLSession写了一段网络请求代码，发现竟然弹框询问了。...* _Nullable response, NSError * _Nullable error) { }]; [sessionDataTask resume]; ---- 以上是我实验出来的情况

    4.2K20
    点击加载更多

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号

      领券