最近发现一个比较好用的小程序自定义模态框，将其简化了一下,可以在框内放入想要的内容。
具体内容如下：
index.wxml
<
view
class=
"btn"
bindtap=
"powerDrawer"
data-statu=
"open"
>button
</
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}}"
>
<
view
class=
"drawer_title"
>弹窗标题
</
view
>
<
view
class=
"drawer_content"
>
</
view
>
<
view
class=
"btn_ok"
bindtap=
"powerDrawer"
data-statu=
"close"
>确定
</
view
>
</
view
>
index.wxss
.btn
{
width:
80%
;
padding:
20
rpx
0
;
border-radius:
10
rpx
;
text-align:
center
;
margin:
40
rpx
10%
;
background: #000
;
color: #fff
;
}
/*mask*/
.drawer_screen
{
width:
100%
;
height:
100%
;
position:
fixed
;
top:
0
;
left:
0
;
z-index:
1000
;
background: #000
;
opacity:
0.5
;
overflow:
hidden
;
}
/*content*/
.drawer_box
{
width:
650
rpx
;
overflow:
hidden
;
position:
fixed
;
top:
50%
;
left:
0
;
z-index:
1001
;
background: #FAFAFA
;
margin:
-150px
50
rpx
0
50
rpx
;
border-radius:
3px
;
}
.drawer_title
{
padding:
15px
;
font:
20px
"microsoft yahei"
;
text-align:
center
;
}
.drawer_content
{
height:
210px
;
overflow-y:
scroll
;
/*超出父盒子高度可滚动*/
}
.btn_ok
{
padding:
10px
;
font:
20px
"microsoft yahei"
;
text-align:
center
;
border-top:
1px
solid #E8E8EA
;
color: #3CC51F
;
}
index.js
Page
({
data
:
{
showModalStatus
:
false
},
powerDrawer
:
function
(e
)
{
var currentStatu
= e
.currentTarget
.dataset
.statu
;
this
.util
(currentStatu
)
},
util
:
function
(currentStatu
)
{
var animation
= wx
.createAnimation
({
duration
:
200
,
timingFunction
:
"linear"
,
delay
:
0
});
this
.animation
= animation
;
animation
.opacity
(
0
).rotateX
(-
100
).step
();
this
.setData
({
animationData
: animation
.export
()
})
setTimeout
(
function
()
{
animation
.opacity
(
1
).rotateX
(
0
).step
();
this
.setData
({
animationData
: animation
})
if
(currentStatu
==
"close"
)
{
this
.setData
(
{
showModalStatus
:
false
}
);
}
}.bind
(
this
),
200
)
if
(currentStatu
==
"open"
)
{
this
.setData
(
{
showModalStatus
:
true
}
);
}
}
})
博客原文：http://blog.csdn.net/michael_ouyang。 https://blog.csdn.net/michael_ouyang/article/details/62430905