微信小程序之自定义模态弹窗（带动画）实例
1、基本需求。
实现用户自定义弹框
带动画（动画可做参靠，个人要是觉得不好看可以自定义动画）
获取弹出框的内容，自定义事件获取
2、案例目录结构
二、程序实现具体步骤
1.弹框index.wxml代码
[图片]
<!–button–>
<view class=“btn” bindtap=“powerDrawer” data-statu=“open”>来点我呀</view>
<!–mask–>
<view class=“drawer_screen” bindtap=“powerDrawer” data-statu=“close” wx:if="{{showModalStatus}}"></view>
<!–content–>
<!–使用animation属性指定需要执行的动画–>
<view animation="{{animationData}}" class=“drawer_box” wx:if="{{showModalStatus}}">
<!–drawer content–>
<view class=“drawer_title”>弹窗标题</view>
<view class=“drawer_content”>
<view class=“top grid”>
<label class=“title col-0”>标题</label>
<input class=“input_base input_h30 col-1” name=“rName” value=“可自行定义内容”></input>
</view>
<view class=“top grid”>
<label class=“title col-0”>标题</label>
<input class=“input_base input_h30 col-1” name=“mobile” value=“110”></input>
</view>
<view class=“top grid”>
<label class=“title col-0”>标题</label>
<input class=“input_base input_h30 col-1” name=“phone” value=“拒绝伸手党”></input>
</view>
<view class=“top grid”>
<label class=“title col-0”>标题</label>
<input class=“input_base input_h30 col-1” name=“Email” value=“仅供学习使用”></input>
</view>
<view class=“top bottom grid”>
<label class=“title col-0”>备注</label>
<input class=“input_base input_h30 col-1” name=“bz”></input>
</view>
</view>
<view class=“btn_ok” bindtap=“powerDrawer” data-statu=“close”>确定</view>
</view>
我这边把效果图放出来吧，需要的，自己看下面地址：http://wxapp.662p.com/thread-3713-1-1.html
这是效果图：
[图片]
