<p>首先看看官方提供的模态弹窗，供大家参考，具体内容如下</p><p><img src="/up_pic/201906/260825559704.png" title="260825559704.png" alt="1.png"/></p><p>api如下：</p><p><img src="/up_pic/201906/260826153111.png" title="260826153111.png" alt="1.png"/></p><p>示例：</p><p><img src="/up_pic/201906/260826342067.png" title="260826342067.png" alt="1.png"/></p><p>这样的模态弹窗，充其量只能做个alert，提示一下信息。</p><p>但是并不能使用它来处理复杂性的弹窗业务，因此写了Michael从新自定义了一个，采用了仿原生的样式写法</p><p>wxml：</p><p>&lt;!--button--&gt;</p><p>&lt;view class=&quot;btn&quot; bindtap=&quot;powerDrawer&quot; data-statu=&quot;open&quot;&gt;button&lt;/view&gt;</p><p></p><p>&lt;!--mask--&gt;</p><p>&lt;view class=&quot;drawer_screen&quot; bindtap=&quot;powerDrawer&quot; data-statu=&quot;close&quot; wx:if=&quot;{{showModalStatus}}&quot;&gt;&lt;/view&gt;</p><p>&lt;!--content--&gt;</p><p>&lt;!--使用animation属性指定需要执行的动画--&gt;</p><p>&lt;view animation=&quot;{{animationData}}&quot; class=&quot;drawer_box&quot; wx:if=&quot;{{showModalStatus}}&quot;&gt;</p><p></p><p>&lt;!--drawer content--&gt;</p><p>&lt;view class=&quot;drawer_title&quot;&gt;弹窗标题&lt;/view&gt;</p><p>&lt;view class=&quot;drawer_content&quot;&gt;</p><p>&lt;view class=&quot;top grid&quot;&gt;</p><p>&lt;label class=&quot;title col-0&quot;&gt;标题&lt;/label&gt;</p><p>&lt;input class=&quot;input_base input_h30 col-1&quot; name=&quot;rName&quot; value=&quot;可自行定义内容&quot;&gt;&lt;/input&gt;</p><p>&lt;/view&gt;</p><p>&lt;view class=&quot;top grid&quot;&gt;</p><p>&lt;label class=&quot;title col-0&quot;&gt;标题&lt;/label&gt;</p><p>&lt;input class=&quot;input_base input_h30 col-1&quot; name=&quot;mobile&quot; value=&quot;110&quot;&gt;&lt;/input&gt;</p><p>&lt;/view&gt;</p><p>&lt;view class=&quot;top grid&quot;&gt;</p><p>&lt;label class=&quot;title col-0&quot;&gt;标题&lt;/label&gt;</p><p>&lt;input class=&quot;input_base input_h30 col-1&quot; name=&quot;phone&quot; value=&quot;拒绝伸手党&quot;&gt;&lt;/input&gt;</p><p>&lt;/view&gt;</p><p>&lt;view class=&quot;top grid&quot;&gt;</p><p>&lt;label class=&quot;title col-0&quot;&gt;标题&lt;/label&gt;</p><p>&lt;input class=&quot;input_base input_h30 col-1&quot; name=&quot;Email&quot; value=&quot;仅供学习使用&quot;&gt;&lt;/input&gt;</p><p>&lt;/view&gt;</p><p>&lt;view class=&quot;top bottom grid&quot;&gt;</p><p>&lt;label class=&quot;title col-0&quot;&gt;备注&lt;/label&gt;</p><p>&lt;input class=&quot;input_base input_h30 col-1&quot; name=&quot;bz&quot;&gt;&lt;/input&gt;</p><p>&lt;/view&gt;</p><p>&lt;/view&gt;</p><p>&lt;view class=&quot;btn_ok&quot; bindtap=&quot;powerDrawer&quot; data-statu=&quot;close&quot;&gt;确定&lt;/view&gt;</p><p>&lt;/view&gt;</p><p>wxss：</p><p>/*button*/</p><p>.btn {</p><p>width: 80%;</p><p>padding: 20rpx 0;</p><p>border-radius: 10rpx;</p><p>text-align: center;</p><p>margin: 40rpx 10%;</p><p>background: #000;</p><p>color: #fff;</p><p>}</p><p></p><p>/*mask*/</p><p>.drawer_screen {</p><p>width: 100%;</p><p>height: 100%;</p><p>position: fixed;</p><p>top: 0;</p><p>left: 0;</p><p>z-index: 1000;</p><p>background: #000;</p><p>opacity: 0.5;</p><p>overflow: hidden;</p><p>}</p><p></p><p>/*content*/</p><p>.drawer_box {</p><p>width: 650rpx;</p><p>overflow: hidden;</p><p>position: fixed;</p><p>top: 50%;</p><p>left: 0;</p><p>z-index: 1001;</p><p>background: #FAFAFA;</p><p>margin: -150px 50rpx 0 50rpx;</p><p>border-radius: 3px;</p><p>}</p><p></p><p>.drawer_title{</p><p>padding:15px;</p><p>font: 20px &quot;microsoft yahei&quot;;</p><p>text-align: center;</p><p>}</p><p>.drawer_content {</p><p>height: 210px;</p><p>overflow-y: scroll; /*超出父盒子高度可滚动*/</p><p>}</p><p></p><p>.btn_ok{</p><p>padding: 10px;</p><p>font: 20px &quot;microsoft yahei&quot;;</p><p>text-align: center;</p><p>border-top: 1px solid #E8E8EA;</p><p>color: #3CC51F;</p><p>}</p><p></p><p>.top{</p><p>padding-top:8px;</p><p>}</p><p>.bottom {</p><p>padding-bottom:8px;</p><p>}</p><p>.title {</p><p>height: 30px;</p><p>line-height: 30px;</p><p>width: 160rpx;</p><p>text-align: center;</p><p>display: inline-block;</p><p>font: 300 28rpx/30px &quot;microsoft yahei&quot;;</p><p>}</p><p></p><p>.input_base {</p><p>border: 2rpx solid #ccc;</p><p>padding-left: 10rpx;</p><p>margin-right: 50rpx;</p><p>}</p><p>.input_h30{</p><p>height: 30px;</p><p>line-height: 30px;</p><p>}</p><p>.input_h60{</p><p>height: 60px;</p><p>}</p><p>.input_view{</p><p>font: 12px &quot;microsoft yahei&quot;;</p><p>background: #fff;</p><p>color:#000;</p><p>line-height: 30px;</p><p>}</p><p></p><p>input {</p><p>font: 12px &quot;microsoft yahei&quot;;</p><p>background: #fff;</p><p>color:#000 ;</p><p>}</p><p>radio{</p><p>margin-right: 20px;</p><p>}</p><p>.grid { display: -webkit-box; display: box; }</p><p>.col-0 {-webkit-box-flex:0;box-flex:0;}</p><p>.col-1 {-webkit-box-flex:1;box-flex:1;}</p><p>.fl { float: left;}</p><p>.fr { float: right;}</p><p>js：</p><p>Page({</p><p>data: {</p><p>showModalStatus: false</p><p>},</p><p>powerDrawer: function (e) {</p><p>var currentStatu = e.currentTarget.dataset.statu;</p><p>this.util(currentStatu)</p><p>},</p><p>util: function(currentStatu){</p><p>/* 动画部分 */</p><p>// 第1步：创建动画实例</p><p>var animation = wx.createAnimation({</p><p>duration: 200, //动画时长</p><p>timingFunction: &quot;linear&quot;, //线性</p><p>delay: 0 //0则不延迟</p><p>});</p><p></p><p>// 第2步：这个动画实例赋给当前的动画实例</p><p>this.animation = animation;</p><p></p><p>// 第3步：执行第一组动画</p><p>animation.opacity(0).rotateX(-100).step();</p><p></p><p>// 第4步：导出动画对象赋给数据对象储存</p><p>this.setData({</p><p>animationData: animation.export()</p><p>})</p><p></p><p>// 第5步：设置定时器到指定时候后，执行第二组动画</p><p>setTimeout(function () {</p><p>// 执行第二组动画</p><p>animation.opacity(1).rotateX(0).step();</p><p>// 给数据对象储存的第一组动画，更替为执行完第二组动画的动画对象</p><p>this.setData({</p><p>animationData: animation</p><p>})</p><p></p><p>//关闭</p><p>if (currentStatu == &quot;close&quot;) {</p><p>this.setData(</p><p> {</p><p> showModalStatus: false</p><p> }</p><p>);</p><p>}</p><p>}.bind(this), 200)</p><p></p><p>// 显示</p><p>if (currentStatu == &quot;open&quot;) {</p><p>this.setData(</p><p>{</p><p> showModalStatus: true</p><p>}</p><p>);</p><p>}</p><p>}</p><p></p><p>})</p><p>运行：</p><p></p>