css

.mask{
display: none;
position: fixed;
width: 100%;
height: 100%;
top:0;
background: rgba(0, 0, 0 ,0.5);
z-index: 99;
}
.mask-red{
position: absolute;
left: 0;
right: 0;
top: 0;
bottom:0;
margin: auto;
width: 18.5rem;
height: 20rem;
border-radius: 14px;
background-image: -webkit-linear-gradient(-90deg, rgb(254,111,98) 0%, rgb(255,56,70) 100%);
background-image: -moz-linear-gradient(-90deg, rgb(254,111,98) 0%, rgb(255,56,70) 100%);
background-image: -o-linear-gradient(-90deg, rgb(254,111,98) 0%, rgb(255,56,70) 100%);
background-image: linear-gradient(-90deg, rgb(254,111,98) 0%, rgb(255,56,70) 100%);
}
.mask-white{
position: absolute;
left: 0;
right: 0;
top: 0;
bottom:0;
margin: auto;
border-radius: 14px;
width: 16.5rem;
height: 18rem;
background: #fff;
}
.mask-img{
width: 11.1rem;
height: 11.05rem;
position: absolute;
left: 0;
right: 0;
top: -6.5rem;
margin: auto;
}
.mask-announcement{
margin-top: 3.5rem;
padding: 1rem;
}
.mask-tit{
font-size: 1.4rem;
color: #ec5d5d;
}
.mask-sub{
font-size: 1rem;
color: #666;
}
.mask-sub-small{
font-size: 0.85rem;
color: #999;
}
.mask .submit-btn{
position: absolute;
left: 0;
right: 0;
bottom: 1rem;
width:13rem;
line-height: 2.8rem;
margin: 0 auto;
box-shadow: 0rem 0.3rem 0.5rem 0rem rgba(236, 93, 93, 0.3);
}
/*关闭*/
.mask-close{
position: absolute;
left: 0;
right: 0;
bottom: -5rem;
text-align: center;
color: #fff;
}
.mask-close i{
font-size: 2.5rem;
}

html

<div class="mask">
<div class="mask-red">
<div class="mask-white">
<img src="../../images/qiandao_lihe.gif" class="mask-img" />
<div class="mask-announcement">
<h3 class="mask-tit mui-text-center lsy-padded-t-10 lsy-padded-b-10">恭喜您签到成功</h3>
<p class="mask-sub mui-text-center lsy-padded-b-10">积分已发放到我的积分里</p>
<p class="mask-sub-small mui-text-center lsy-padded-b-10">签到可获得10积分,积分可用来升级会员等级</p>
<div class="submit-btn lsy-margin-t-15 white-color">去我的积分看看</div>
</div>
<div class="mask-close"><i class="mui-icon iconfont icon-guanbi"></i></div>
</div>
</div>

</div>

js

<script src="../../js/jquery.min.js"></script>
<script type="text/javascript">
mui.init();
$(".mask").hide()
$("#check").click(function() {
$(".mask").show()
});
$(".mask").on('touchmove',function(e){
e.preventDefault(); //阻止默认遮罩后滚动行为
})
$("#close").click(function() {
$(".mask").hide()
});

</script>

app遮罩层--网赚的更多相关文章

  1. 网赚app

    网赚app有很多目前来说做的比较好的赚的比较多的有四款推荐 宝石星球下载地址:http://www.baoshixingqiu.com/redPacket?key=548341 雪梨网APP下载地址 ...

  2. 移动端优化 && 清除移动端网站点击a标签时闪现的边框或遮罩层(CSS) && 移动端点击 && 文字不可选择

      在移动端网站,当你点击加了a标签的文字或图片时,该元素的周围会闪现一个蓝色的边框,在微信上的网站就是如此:而有的浏览器会闪现一个半透明遮罩层,比如移动端的Chrome浏览器,其实这些特效无非就是为 ...

  3. Android自定义遮罩层设计

    在做网页设计时,前端设计人员会经常用到基于JS开发的遮罩层,并且背景半透明.这样的效果怎么样在Android上实现呢?这个实现并不困难,先来上效果图: <ignore_js_op> 201 ...

  4. layer遮罩层 简单的遮罩层

    在这里提供一个简单layer遮罩层,想深入了解可以进入 layer官网 多多学习哦. 先看下HTML页面代码 <!DOCTYPE html> <html lang="en& ...

  5. Axure Base 09 带遮罩层的弹出框

    示例原型下载:小楼Axure原创元件-带遮罩层的弹出框 实现目标: 1.   点击按钮弹出带遮罩层的对话框: 2.   页面上下左右滚动时,弹出的对话框水平和垂直始终居中. 实现步骤如下: 1. 拖入 ...

  6. 如何在Vue中,当鼠标hover上元素时,给元素加遮罩层

    介绍 当鼠标hover 上元素时,给元素加一层遮罩层. 效果图 使用 import VueHoverMask from 'vue-hover-mask' export default { compon ...

  7. element-ui遮罩层el-dialog的使用

    template <el-button type="text" @click="dialogVisible = true">点击打开 Dialog& ...

  8. jQuery遮罩层登录对话框

    用户登录是许多网站必备的功能.有一种方式就是不管在网站的哪个页面,点击登录按钮就会弹出一个遮罩层,显示用户登录的对话框.这用方式比较灵活方便.而现在扫描二维码登录的方式也是很常见,例如QQ.微信.百度 ...

  9. 使用CSS3的box-shadow实现双透明遮罩层对话框

    box-shadow介绍 在我之前的一篇文章<从天猫和支付宝身上学习opcity与rgba>中,介绍了实现双透明遮罩层效果的两种方法,分别是opacity和rgba.他们需要分别依赖于不同 ...

随机推荐

  1. 使用Git和Svn

    一. 使用SVN 1. 下载tortoiseSVN 2. 右键SVN checkout(下载项目到本地) 3. 更新和提交 二. 使用GIT 1. 下载git 2. 下载tortoiseGit 3. ...

  2. [RHEL8]关闭SELinux(同CentOS7)

    修改配置文件(永久修改) # vi /etc/selinux/config SELINUX=disabled # 关闭 SELINUX=enforcing # 开启 命令方式(临时修改重启失效) # ...

  3. 我不知道的js(一)作用域与闭包

    作用域与闭包 作用域 什么是作用域 作用域就是一套规则,它负责解决(1)将变量存在哪儿?(2)如何找到变量?的问题 作用域工作的前提 谁赋予了作用域的权利?--js引擎 传统编译语言编译的过程 分词/ ...

  4. vue 路由过渡动效

    <router-view> 是基本的动态组件,所以我们可以用 <transition> 组件给它添加一些过渡效果: <transition name="slid ...

  5. Maven项目的目录问题

    创建maven项目,使不使用骨架都行. java项目的目录 src/main  项目 java存放.java文件,resources存放静态资源.配置文件.映射文件. 静态资源一般在resources ...

  6. SecureCRT的下载、安装( 过程非常详细!!值得查看)

    SecureCRT的下载.安装( 过程非常详细!!值得查看) 简单介绍下SecureCRT 一.SecureCRT的下载 二.SecureCRT的安装 简单介绍下SecureCRT SecureCRT ...

  7. .NET CORE(C#) WPF 方便的实现用户控件切换(祝大家新年快乐)

    微信公众号:Dotnet9,网站:Dotnet9,问题或建议:请网站留言, 如果对您有所帮助:欢迎赞赏. .NET CORE(C#) WPF 方便的实现用户控件切换(祝大家新年快乐) 快到2020年了 ...

  8. vue-cli-service 报错

    错误内容: vue-cli-service serve /bin/sh: vue-cli-service: command not found error Command failed with ex ...

  9. C语言再学习part2-重新认识C语言词汇

    迷阳迷阳,无伤吾行.无行郗曲,无伤吾足.—庄子 C语言词汇: 标识符 在程序中的变量名.函数名.标号等等成为标识符.其中标识符相在C中只能是字母A~Z,a~z,数字0~9,下划线(_)组成的字符串,并 ...

  10. java.lang.ClassCastException:java.util.LinkedHashMap不能转换为com.testing.models.xxx

    后台接收前台的json字符串 转pojo 问题(Object 对应定义的pojo) ObjectMapper mapper=new ObjectMapper(); Object object = ma ...