自定义弹框
wxml
自定义弹框
内容显示1
内容显示2
…………
取消
确定
自定义弹框
js
Page({
// 页面的初始数据
data: {
ModalHidden:true // 弹框的显示与隐藏
},
// 生命周期函数--监听页面加载
onLoad: function (options) {
},
ModalTap:function(e){
this.setData({
ModalHidden:!this.data.ModalHidden
})
},
// 确定
confirm:function(e){
this.setData({
ModalHidden:!this.data.ModalHidden
})
},
// 取消
cancel:function(e){
this.setData({
ModalHidden:!this.data.ModalHidden
})
},
//生命周期函数--监听页面初次渲染完成
onReady: function () {
},
// 生命周期函数--监听页面显示
onShow: function () {
},
// 生命周期函数--监听页面隐藏
onHide: function () {
},
// 生命周期函数--监听页面卸载
onUnload: function () {
},
// 页面相关事件处理函数--监听用户下拉动作
onPullDownRefresh: function () {
},
// 页面上拉触底事件的处理函数
onReachBottom: function () {
},
// 用户点击右上角分享
onShareAppMessage: function () {
}
})
wxss
.Modal{
position: fixed;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
z-index: 9999;
display: flex;
justify-content: center;
align-items: center;
}
.ModalShow{
width:80%;
max-height:60%;
background-color: #fff;
border-radius: 5px;
overflow: auto;
}
.flex {
display: flex;
}
.ModalHeader{
justify-content: center;
align-items: center;
line-height: 3;
position: sticky;
top: 0;
font-weight: bolder;
overflow:hidden;
background: #fff;
}
.ModalBody{
flex-direction: column;
padding: 0 15rpx;
line-height: 2.5;
justify-content: center;
overflow: auto;
}
.ModalFooter{
border-top: 1px solid #ccc;
justify-content: space-between;
text-align: center;
align-items: center;
line-height: 3;
position: sticky;
bottom: 0;
overflow:hidden;
}
.ModalFooter view{
flex: 1;
}
.ModalFooter view:first-child{
background: beige;
}
.ModalFooter view:last-child{
background: rgb(63, 155, 78);
color: #fff;
}