微信小程序中遮罩层的实现
近期在写一点小东西，碰到遮罩层，今天把它总结下来，方便大家共同学习：
有好几种方法，今天先来第一种。
准备工作：
一张图片：close.png 
一、方法1
先上效果：
点击“核算”以后，遮罩层出现，同时conts（即面板）出现。再次点击“核算”或conts右上角的关闭按钮时，遮罩层消失，conts隐藏。
源码：
wxml代码
页面内容->根据自己需求陈列
￥666
{{showView?'核算':'核算'}}
{{showView?'核算':'核算'}}
提 交
这里面的内容根据自己的需求进行详细的编写。。。。。。。
wxss代码
.wrap{
width: 750rpx;
height: auto;
font-size: 34rpx;
}
/*--------------------------------------------------------------------1 */
.txts{
height: 1600rpx;
}
/*---------------------------------------------------------------------2 */
.submit{
height: 120rpx;
display: flex;
flex-direction: row;
line-height: 120rpx;
position: fixed;
left: 0;
bottom: 0;
/*要显示在遮罩层shade的上面 */
z-index: 2;
}
/*左边 */
.submitL{
width: 510rpx;
background-color: white;
border-top: 1rpx solid gainsboro;
}
.all{
font-size: 36rpx;
color: #FF8C00;
margin-left: 20rpx;
}
.mingXi{
display: inline-block;
height: 120rpx;
width: 100rpx;
float: right;
line-height: 120rpx;
margin-right: 20rpx;
}
/*右边 */
.submitR{
width: 240rpx;
background-color: #8B008B;
color: white;
font-size: 36rpx;
text-align: center;
border-top: 1rpx solid #8B008B;
}
/*------------------------------------------------------------------------3 */
/*遮罩层 */
.shade{
width:100%;
height:100%;
top:0;
background:rgba(0,0,0,0.5);
overflow: hidden;
/*要显示在wrap的上面 */
z-index: 1;
position: absolute;
}
/*显示与隐藏的内容即点击核算后所展示的详细内容 */
.conts{
width: 100%;
height: 428rpx;
background-color: white;
position: fixed;
top: 636rpx;
text-indent: 60rpx;
}
/*显示整个conts */
.show{
display: block;
}
/*隐藏整个conts */
.hide{
display: none;
}
/*关闭按钮（关闭整个conts） */
.closeImg{
width: 60rpx;
height: 60rpx;
float: right;
position: relative;
top: -70rpx;
left: 2rpx;
background-color: white;
border-radius: 50%;
}
js代码
Page({
data: {
showView: true
},
// 用于实现点击“核算”时，来显示与隐藏整个“conts”，这一部分其实是利用了面板的显示与隐藏功能
change: function () {
let that = this;
that.setData({
showView: (!that.data.showView)
})
},
// 通过点击“conts”区域里右上角的关闭按钮来关闭整个“conts”，当然了，你可以把该事件作用于“conts”上，此时点击“conts”
// 的任意一个地方，都会使得这个“conts”关闭
close: function () {
let that = this;
that.setData({
showView: (!that.data.showView)
})
}
})
*2018.3.14上午*
今天把下面的内容增长（高于一屏的高度）后发现，出现了遮罩层的滚动穿透问题，尝试了好久还是没解决掉，后续解决了我会单独贴出，然后链接到这~
*2018.3.14下午*
二、方法2
效果：
点击“核算”以后，遮罩层出现，同时conts出现。再次点击conts右上角的关闭按钮时，遮罩层消失，conts隐藏。
说明：此种方法与前面方法1不同的是，不能通过点击“核算”来隐藏整个conts区域（即面板）与让遮罩消失，其他的效果一样。
源码：
wxml代码：
页面内容->根据自己需求陈列
￥666
核算
提 交
这里面的内容根据自己的需求进行详细的编写。。。。。。。
wxss代码：
.wrap{
width: 750rpx;
height: auto;
font-size: 34rpx;
}
/*-----------------------------1------------------------------------------------ */
.txts{
height: 1600rpx;
}
/*-----------------------------2------------------------------------------------ */
.submit{
height: 120rpx;
display: flex;
flex-direction: row;
line-height: 120rpx;
position: fixed;
left: 0;
bottom: 0;
z-index: 2;
}
/*左边 */
.submitL{
width: 510rpx;
background-color: white;
border-top: 1rpx solid gainsboro;
}
.all{
font-size: 36rpx;
color: #FF8C00;
margin-left: 20rpx;
}
.tit{
float: right;
margin-right: 60rpx;
}
/*右边 */
.submitR{
width: 240rpx;
background-color: #8B008B;
color: white;
font-size: 36rpx;
text-align: center;
border-top: 1rpx solid #8B008B;
}
/*--------------------------------3--------------------------------------------- */
/*遮罩层 */
.shade{
width:100%;
height:100%;
top:0;
background:rgba(0,0,0,0.5);
overflow: hidden;
z-index: 1;
position: absolute;
}
.conts{
width: 100%;
height: 428rpx;
background-color: white;
position: fixed;
top: 650rpx;
}
/*关闭按钮（关闭整个conts） */
.closeImg{
width: 50rpx;
height: 50rpx;
position: absolute;
left: 701rpx;
top: -20rpx;
background-color: white;
border-radius: 50%;
}
js代码：
Page({
data: {
// 一开始遮罩层与conts区域为隐藏
flag: true
},
// 当点击“核算”时，执行 show，flag变为false，遮罩层与conts区域出现
show: function () {
this.setData({ flag: false })
},
// 当遮罩层与conts区域出现时，执行hide,flag变为true，遮罩层与conts区域再次被隐藏
hide: function () {
this.setData({ flag: true })
}
})
三、方法3
效果：
点击“核算”以后，遮罩层出现，同时conts出现。再次点conts的任何地方（包括右上角的关闭按钮）或遮罩层，遮罩层消失，conts隐藏。
说明：该种方法与上面2种方法不同的是，通过单击遮罩层也会使得conts与遮罩消失，还有与方法2一样，不能通过单击“核算”来隐藏conts与遮罩。还有一点值得注意的是，前面2种conts是包裹在遮罩层里的（布局上）------这样原本就使得conts在遮罩层上面显示，所以没必要再给conts设置z-index，但第三种方法：conts不包裹在遮罩层shade里，他们是平级的，所以要给conts设置z-index，使其高于遮罩层显示。
源码：
wxml代码：
页面内容->根据自己需求陈列
￥666
核算
提 交
这里面的内容根据自己的需求进行详细的编写。。。。。。。
wxss代码：
.wrap{
width: 750rpx;
height: auto;
font-size: 34rpx;
}
/*------------------------------------------------------1------------------------- */
.txts{
height: 1600rpx;
}
/*------------------------------------------------------2-------------------------- */
.submit{
height: 120rpx;
display: flex;
flex-direction: row;
line-height: 120rpx;
position: fixed;
left: 0;
bottom: 0;
z-index: 2;
}
/*左边 */
.submitL{
width: 510rpx;
background-color: white;
border-top: 1rpx solid gainsboro;
}
.all{
font-size: 36rpx;
color: #FF8C00;
margin-left: 20rpx;
}
.tit{
float: right;
margin-right: 60rpx;
}
/*右边 */
.submitR{
width: 240rpx;
background-color: #8B008B;
color: white;
font-size: 36rpx;
text-align: center;
border-top: 1rpx solid #8B008B;
}
/*---------------------------------------------------3---------------------------- */
/*遮罩层 */
.shade{
width:100%;
height:100%;
top:0;
background:rgba(0,0,0,0.5);
overflow: hidden;
z-index: 1;
position: absolute;
}
/*---------------------------------------------------4---------------------------- */
.conts{
width: 100%;
height: 428rpx;
background-color: white;
position: fixed;
top: 650rpx;
z-index: 2
}
/*关闭按钮（关闭整个conts） */
.closeImg{
width: 50rpx;
height: 50rpx;
position: absolute;
left: 701rpx;
top: -20rpx;
background-color: white;
border-radius: 50%;
}
js代码：
Page({
data: {
// 一开始遮罩层与conts处于不显示状态
disp: "none"
},
// 当点击“核算时，执行show，遮罩层与conts显示出来
show: function () {
this.setData({
disp: "block"
})
},
// 点击遮罩层或conts时，遮罩层与conts被隐藏
hide: function () {
this.setData({
disp: "none"
})
}
})
说明：点击“遮罩”隐藏面板，还有一种方法，更简单，如下：
源码：
wxml代码
页面内容->根据自己需求陈列
面板内容->根据自己需求陈列
wxss代码
.wrap{
height: 1000px;
}
/*-----------------------------1页面内容区样式---------------------------------- */
.title1{
font-size: 30rpx;
}
.btn{
font-size: 30rpx;
width: 160rpx;
height: 68rpx;
margin-top: 200rpx;
}
/*-----------------------------遮罩层样式------------------------------------- */
.shade{
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 1;
background-color: rgba(0,0,0,0.8);
opacity: 0.5;
overflow: hidden;
}
/*----------------------------面板样式----------------------------------------- */
.cont {
width: 600rpx;
height: 360rpx;
z-index: 2;
overflow: hidden;
position: fixed;
top: 20%;
left: 60rpx;
font-size: 32rpx;
border-radius: 10rpx;
border: 1rpx solid greenyellow;
background-color: white;
}
.tit{
color: coral;
}
js代码
Page({
data: {
// 一开始遮罩层与面板隐藏
shows: false,
},
// 点击“点我”以后遮罩层与面板显示
click: function (e) {
this.setData({
shows: true,
})
},
// 点击遮罩层，显示的遮罩层与面板又隐藏起来
close: function () {
this.setData({
shows: false,
})
},
})说明：这种方法与wx:if="{{}}"与方法2中的hidden="{{}}"实现的思路一模一样，只是条件（true，false）完全相反而已~
结束语：
上面方法都没有解决掉遮罩层的穿透问题，当页面内容高于一屏时，会有穿透问题~，欢迎一起来解决这个问题~
上述4种方法实现手段与效果某些地方大同小异，可根据功能需求进行选取与整合~
更新于：2019-10-30
关于触摸穿透的问题：请参考此文章https://blog.csdn.net/Syleapn/article/details/102823424
以前的写法有些繁琐，直接可以参考这边（此方法即可）https://blog.csdn.net/Syleapn/article/details/102823424