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、页面呈现
