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. 面试官:你说你熟悉jvm?那你讲一下并发的可达性分析

    这是why技术的第35篇原创文章 上面这张图是我还是北漂的时候,在鼓楼附近的胡同里面拍的. 那天刚刚下完雨,路过这个地方的时候,一瞬间就被这五颜六色的门板和自行车给吸引了,于是拍下了这张图片.看到这张 ...

  2. 用命令提示符运行简单的Java程序报错

    首先用记事本写一个最简单的Java代码,我把文件保存在桌面的HelloWorld文件夹中,这里将记事本的名称改为HelloWorld.java public class HelloWorld{ pub ...

  3. git revert和rebase

    当前多个commit,想把这几个commit合并成一个,但是想把其中某个commit add2的去掉, 用git revert add2的commit_id,这里只是撤销那次代码提交,后面的add3的 ...

  4. vue路由--静态路由

    vue的单页面应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来.传统的页面应用,是用一些超链接来实现页面切换和跳转的.在vue-router单页面应用中,则是路径之间的切换,也就是 ...

  5. window 下如何恢复被删除的mysql root账户及密码(mysql 8.0.17)

    不久前自学完完sql,下了mysql8.0.17,安装配置好后探索着,想着用root账户登上去能不能删除root账户呢,然后就想给自己一巴掌,,, 如何快速恢复root: 1.关闭mysql服务:wi ...

  6. MySQL安装详细步骤(附迅雷下载链接)

    环境:windows10.64bit.mysql 8.0.19 迅雷下载链接8.0版本 https://cdn.mysql.com//Downloads/MySQLInstaller/mysql-in ...

  7. win下python脚本以unix风格换行保存将会报错为编码问题 SyntaxError: encoding problem:gbk

    utf-8与gbk编码都报错 从别人的github拉下来一个python脚本. 直接运行,python报错如下: File ".\drag_files_do_event.py", ...

  8. SpringCloud踩坑

    今天在使用 SpringCloud 时遇到了一个问题,感觉有不少小伙伴会遇到,所以记录下来 版本说明 SpringBoot 2.2.4.RELEASE SpringCloud Greenwich.SR ...

  9. 手动配置IP地址

    更改适配器属性 -> 选择一个网络,单击右键 -> 属性 -> Internet 协议版本 4 (TCP/IPv4)-> 属性 进入如下界面,开始配置: IP地址: IP地址用 ...

  10. StackExchange.Redis 系列 1:基础使用

    本系列博文已经全部完成,完整系列请访问:https://blog.zhuliang.ltd/tags/StackExchange-Redis%E7%B3%BB%E5%88%97/ 本文转自:https ...