wxml

<!--自定義彈框--> <viewclass="Modal"hidden="{{ModalHidden}}"> <viewclass="ModalShow"> <viewclass="flexModalHeader"> <view>自定義彈框</view> </view> <viewclass="flexModalBody"> <view>內容顯示1</view> <view>內容顯示2</view> <view>…………</view> </view> <viewclass="flexModalFooter"> <viewbindtap="cancel">取消</view> <viewbindtap="confirm">確定</view> </view> </view> </view> <!--按鈕--> <buttontype="default"bindtap="ModalTap">自定義彈框</button>

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:015rpx; line-height:2.5; justify-content:center; overflow:auto; } .ModalFooter{ border-top:1pxsolid#ccc; justify-content:space-between; text-align:center; align-items:center; line-height:3; position:sticky; bottom:0; overflow:hidden; } .ModalFooterview{ flex:1; } .ModalFooterview:first-child{ background:beige; } .ModalFooterview:last-child{ background:rgb(63,155,78); color:#fff; }