开发项目过程中需要在进入首页时弹出红包的功能需求，在捣鼓一番之后完成图如下。
二话不说直接上代码。
wxml代码：
<!-- 红包 --><view class="cu-modal {{modalName=='Image'?'show':''}}"> <view class="cu-dialog"> <view class="bg-imgs" style="background-image: url('https://6861-haoai-hnpmh-1259368460.tcb.qcloud.la/img/index/%E7%BA%A2%E5%8C%85.png?sign=c4bbd4b057995ebb07d31a85860c7d62&t=1560582751');"> <view class="cu-bar justify-end text-white"> <view class="action xx" bindtap="hideModal"> <text class="cuIcon-close"></text> </view> </view> </view> </view></view>wxss代码：
/* 红包 */.bg-imgs{ height: 350px; background-repeat: no-repeat; background-size: 100% 100%;}.hb-text{ padding-top: 10px; color: red;} .xx{ float: right; padding-right: 15px; color:white; } .cu-modal.show {opacity: 1;transition-duration: 0.3s;-ms-transform: scale(1);transform: scale(1);overflow-x: hidden;overflow-y: auto;pointer-events: auto;}.cu-dialog {position: relative;display: inline-block;vertical-align: middle;margin-left: auto;margin-right: auto;width: 300px;max-width: 100%;border-radius: 10rpx;overflow: hidden;}js代码：
// 弹出红包 onReady() { this.showModal() }, showModal() { this.setData({ modalName: 'Image' }) }, hideModal(e) { this.setData({ modalName: null }) },首先在页面上写一个隐藏的模态框，编辑好样式，当页面加载时触发onReady，使隐藏的模态框弹出。给模态框上给个×绑定隐藏模态框事件，给红包绑定跳转到领取红包详情页面。
微信小程序
