作者：Happy__EveryDay，来自授权效果图：index。宁波微信小程序开发是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或者搜一下即可打开应用。wxml：button type= quot;default quot; bindtap= quot;clickbtn quot; 点击 /button view class= quot;commodity_screen quot; bindtap= quot;hideModal quot; wx:if= quot;{{showModalStatus}} quot;/view view an 。。
作者：Happy__EveryDay，来自授权
效果图：
index。wxml：
lt;button type="default" bindtap="clickbtn" gt;
点击 lt;/button gt; lt;view bindtap="hideModal" wx:if="{{showModalStatus}}" gt; lt;/view gt; lt;view animation="{{animationData}}" wx:if="{{showModalStatus}}" gt; lt;!--对话框标题-- gt; lt;view gt;
请输入网站内容 lt;/view gt; lt;!--对话框输入部分-- gt; lt;view gt;
lt;input type="text" bindblur="input_content" / gt; lt;/view gt; lt;!--对话框按钮-- gt; lt;view gt;
lt;/view gt; lt;view gt;
lt;view bindtap="click_cancel" gt;
取 消
lt;/view gt;
lt;view gt;
lt;/view gt;
lt;view bindtap="click_ok" gt;
确 定
lt;/view gt; lt;/view gt; lt;/view gt;
index。js：
var inputinfo = ""; var app = getApp() Page({
data: {
animationData:"",
showModalStatus:false
},
onLoad: function () {
},
showModal: function () {
// 显示遮罩层
var animation = wx。createAnimation({
duration: 200,
timingFunction: "linear",
delay: 0
})
this。animation = animation
animation。translateY(300)。step()
this。setData({
animationData: animation。宁波微信小程序开发是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或者搜一下即可打开应用。export(),
showModalStatus: true
})
setTimeOUT(出局）(function () {
animation。translateY(0)。step()
this。setData({
animationData: animation。export()
})
}。bind(this), 200)
},
clickbtn:function(){
if(this。data。showModalStatus){
this。hideModal();
}else{
this。showModal();
}
},
hideModal: function () {
// 隐藏遮罩层
var animation = wx。createAnimation({
duration: 200,
timingFunction: "linear",
delay: 0
})
this。animation = animation
animation。translateY(300)。step()
this。setData({
animationData: animation。export(),
})
setTimeOUT(出局）(function () {
animation。translateY(0)。step()
this。setData({
animationData: animation。export(),
showModalStatus: false
})
}。bind(this), 200)
},
click_cancel:function(){
console。log("点击取消(Cancel)");
this。hideModal();
},
click_ok:function(){
console。宁波微信小程序开发其中，通过公众号关联，用户可以实现公众号与小程序之间相互跳转。小程序体现了“用完即走”的理念，用户不用关心是否安装太多应用的问题。应用将无处不在，随时可用，但又无需安装卸载。 log("点击了确定===，输入的信息为为==",inputinfo);
this。hideModal();
},
input_content:function(e){
console。log(e);
inputinfo = e。detail。value;
} })
源码(source code)下载：modalTest。rar
