上一次推送，我們主要分享了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）：