vue 弹出遮罩层样式实例


Posted in Javascript onJuly 22, 2020

以前做遮罩层都是写最小高度来占满屏,但是总会出现问题,也没改变,今天一个人在交流群上问这个时,看到一个回答解决了我这一个bug,学到了,现在记录一下样式。

<div class='popContainer'></div>

div.popContainer{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.3);
}

这样遮罩层就会占满屏了

补充知识:vue 锁定蒙版 不让里面页面滑动

其实就是一句代码,在你的蒙版里面添加一句@touchmove.prevent就好了,下面是例子

<!-- 阴影背景层 --> <div class="layout" @touchmove.prevent :style="{'display':flag?'block':'none'}" @click="closeAction"></div>

以上这篇vue 弹出遮罩层样式实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Jquery多选下拉列表插件jquery multiselect功能介绍及使用
May 24 Javascript
JQEasy-ui在IE9以下版本中二次加载的问题分析及处理方法
Jun 23 Javascript
js使用DOM设置单选按钮、复选框及下拉菜单的方法
Jan 20 Javascript
js实现有时间限制消失的图片方法
Feb 27 Javascript
JavaScript中字符串分割函数split用法实例
Apr 07 Javascript
javascript实现table单元格点击展开隐藏效果(实例代码)
Apr 10 Javascript
jquery replace方法去空格
May 08 jQuery
AngularJS+Bootstrap3多级导航菜单的实现代码
Aug 16 Javascript
angular基于ng-alain定义自己的select组件示例
Feb 23 Javascript
Angular动态绑定样式及改变UI框架样式的方法小结
Sep 03 Javascript
vue3.0 CLI - 3.2 路由的初级使用教程
Sep 20 Javascript
微信小程序如何访问公众号文章
Jul 08 Javascript
vue中解决拖拽改变存在iframe的div大小时卡顿问题
Jul 22 #Javascript
vue中实现拖动调整左右两侧div的宽度的示例代码
Jul 22 #Javascript
在vue中实现禁止回退上一步,路由不存历史记录
Jul 22 #Javascript
vue项目中使用多选框的实例代码
Jul 22 #Javascript
vue中el-input绑定键盘按键(按键修饰符)
Jul 22 #Javascript
解决VUE-Router 同一页面第二次进入不刷新的问题
Jul 22 #Javascript
js实现查询商品案例
Jul 22 #Javascript
You might like
Js callBack 返回前一页的js方法
2008/11/30 Javascript
js Flash插入函数免激活代码
2009/03/31 Javascript
javascript &amp;&amp;和||运算法的另类使用技巧
2009/11/28 Javascript
改进版通过Json对象实现深复制的方法
2012/10/24 Javascript
jquery $(this).attr $(this).val方法使用介绍
2013/10/08 Javascript
深入探寻javascript定时器
2015/01/02 Javascript
javascript实现youku的视频代码自适应宽度
2015/05/25 Javascript
jQuery实现点击弹出背景变暗遮罩效果实例代码
2016/06/24 Javascript
JS中判断null的方法分析
2016/11/21 Javascript
判断横屏竖屏(三种)
2017/02/13 Javascript
使用jQuery实现动态添加小广告
2017/07/11 jQuery
Vue项目中使用Vux的安装过程
2018/05/01 Javascript
vue如何根据网站路由判断页面主题色详解
2018/11/02 Javascript
基于vue的验证码组件的示例代码
2019/01/22 Javascript
详解React项目如何修改打包地址(编译输出文件地址)
2019/03/21 Javascript
详解小程序如何改变onLoad的执行时机
2019/11/01 Javascript
[01:04:01]2014 DOTA2华西杯精英邀请赛5 24 DK VS VG
2014/05/25 DOTA
Python数据结构与算法之列表(链表,linked list)简单实现
2017/10/30 Python
Python实现的单向循环链表功能示例
2017/11/10 Python
python+django+sql学生信息管理后台开发
2018/01/11 Python
Python实现将照片变成卡通图片的方法【基于opencv】
2018/01/17 Python
python安装pywin32clipboard的操作方法
2019/01/24 Python
Python集中化管理平台Ansible介绍与YAML简介
2019/06/12 Python
Django中使用MySQL5.5的教程
2019/12/18 Python
Python GUI库PyQt5图形和特效样式QSS介绍
2020/02/25 Python
关于python tushare Tkinter构建的简单股票可视化查询系统(Beta v0.13)
2020/10/19 Python
Html5页面上如何禁止手机虚拟键盘弹出
2020/03/19 HTML / CSS
世界上最大的罕见唱片、CD和音乐纪念品网上商店:991.com
2018/05/03 全球购物
师范毕业生求职自荐信
2013/09/25 职场文书
致跳远、跳高运动员广播稿
2014/01/09 职场文书
眼镜促销方案
2014/03/15 职场文书
群众路线教育实践活动整改落实情况汇报
2014/10/28 职场文书
质量整改报告范文
2014/11/08 职场文书
商场营业员岗位职责
2015/04/14 职场文书
幼儿园元旦主持词
2015/07/06 职场文书
Python爬虫基础之初次使用scrapy爬虫实例
2021/06/26 Python