本篇内容主要讲解“小程序怎么自定义弹框”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“小程序怎么自定义弹框”吧!
1、页面简单布局
<button bindtap='ElasticFrameClick'>弹框</button>
<view class="modal-mask" bindtap="hideModal" wx:if="{{showModal}}"></view>
<view wx:if="{{showModal}}">
<view class="modal-content">
<view class='modal_title'>添加备注</view>
<view class='modal_textarea'>
<textarea placeholder='备注' maxlength='-1'></textarea>
</view>
<view class='btn'bindtap='hideModal'>保存</view>
</view>
</view>2、样式设置
/* 遮盖层 */
.modal-mask {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
background: #000;
opacity: 0.5;
overflow: hidden;
z-index: 9000;
color: #fff;
}
/* 白色背景 */
.modal-content {
position: fixed;
top: 120rpx;
left: 75rpx;
z-index: 9500;
width: 600rpx;
height: 720rpx;
overflow: hidden;
background: #fff;
border-radius: 20rpx;
}
.modal_title {
height: 96rpx;
width: 100%;
line-height: 96rpx;
border-top-right-radius: 20rpx;
border-top-left-radius: 20rpx;
background-color: #5a94ff;
color: #fff;
text-align: center;
}
.modal_textarea {
height: 395rpx;
width: calc(100% - 40rpx);
margin: 20rpx;
}
.modal_textarea textarea {
height: 100%;
width: 100%;
}
.btn{
height: 70rpx;
width: 390rpx;
background-color: #5a94ff;
color: #fff;
text-align: center;
line-height: 70rpx;
border-radius: 50rpx;
margin: 0 auto;
margin-top: 40rpx;
}3、js控制
Page({
/**
* 页面的初始数据
*/
data: {
showModal: false,
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function(options) {
},
ElasticFrameClick: function() {
this.setData({
showModal: true
})
},
toShowModal(e) {
this.setData({
showModal: true
})
},
// 隐藏弹框
hideModal() {
this.setData({
showModal: false
});
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function() {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function() {
}
})4、页面呈现
到此，相信大家对“小程序怎么自定义弹框”有了更深的了解，不妨来实际操作一番吧！这里是亿速云网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
