上一次推送，我们主要分享了view组件的基础使用及自定义底部菜单、透明点击区域的做法。
今天，我们依然围绕view分享第二种延伸使用——带蒙层弹窗。
我们会用到的关键技巧有：
- view嵌套；
- 透明点击区域；
- view的hidden属性（不填默认false，任意值为true）；
- CSS样式（opacity、position）；
- image组件；
- bindtap绑定点击事件。
我们先来看一个效果图（图片来自花瓣）：
如上是商城类小程序经典的运营玩法之一——进店红包，制作如上图效果几乎成了商城类小程序开发的必备技巧。
这里我们提供一种制作思路，具体如下：
1、先用view制作一个透明度80%的黑色区域，宽高100%满屏，固定定位于窗口（position:fixed），设置hidden属性（为方便描述，以下我们称之为“弹窗1”）；
2、在弹窗1之内嵌套一个image用于显示红包（这里暂用静态本地图片代替），图片路径可以是在本地也可以是网络路径；
3、在image之内嵌套一个view作为空白点击区域，绝对定位于关闭图标位置，绑定点击隐藏弹窗1的事件；
4、重复步骤3,建立另一个空白点击区域，绝对定位于领取图标位置，绑定点击领取红包的事件及点击隐藏弹窗1的事件。
*高坑预警：制作弹窗类view，我们一般以浏览窗口作为定位参考对象，这样可以保证所有手机用户看到的组件位置基本一致，故此时制作空白点击区域时应注意——属于哪个组件的空白点击区域，该空白点击区域须嵌套在该组件之内，并使用绝对定位，否则可能因为不同手机屏幕尺寸不一致而导致错位，调试时可以暂时设定背景色。
WXML+CSS代码如下（可黏贴预览）：
<!--这段是WXML代码-->
<!--进店红包实例-->
<view class='tanc' hidden='{{gifth}}'>
<view class=’mengc’></view>
<image class=’rbimg’ src='https://image.ipaiban.com/upload-ueditor-image-20180526-1527304291564037771.png'>
<view class=’closerb’ bindtap='closegift'></view>
<view class=’bindbut’ bindtap='enterstore'></view>
</image>
</view>
/*这段是对应的WXSS代码*/
.tanc{
width:100%;
height:100%;
position:fixed;
top:0;
left:0
}
.mengc{
width:100%;
height:100%;
position:fixed;
background:#fff1ba;
opacity:0.8;
top:0;
left:0
}
.rbimg{
width:510rpx;
height:576rpx;
position:fixed;
top:20%;
left:120rpx
}
.closerb{
width:80rpx;
height:80rpx;
position:absolute;
top:0;
right:8rpx
}
.bindbut{
width:480rpx;
height:100rpx;
position:absolute;
top:80%;
right:15rpx
}
关于我们
我们愿意利用每天的三分钟，致力于帮助更多新媒体人从零基础到深度掌握小程序；
我们谨希望在新媒体探索上，一路有你，一起成长；
这，是我们的梦想。
如果你认同我们，请帮我们转发，这将是对我们坚持梦想最大的鼓励！
查看原文更多详细资料，欢迎关注公众号【一人从零开发小应用】（或搜索微信号：xiaochengxu1038）：
