網上搜了一下感覺都沒有好用的自定義彈框就自己手寫了一個,方便以后CV

彈框可以點擊按鈕關閉，也可以點擊空白關閉

代碼很簡單

wxml

<view bindtap="submit">點擊顯示</view> <view class="mask" bindtap="preventTouchMove" wx:if="{{showModal}}"></view><view class="mask1" wx:if="{{showModal}}"><view class="modalDlg"><view style="height: 500rpx;"></view><button bindtap="showHide">點我可以關掉對話框</button> </view> </view>

wxss

.mask{width: 100%;height: 100%;position: fixed;top: 0;left: 0;background: #000;opacity: 0.7; } .mask1{position: absolute;width: 100%;top: 20%; }.modalDlg{position: relative;z-index: 9999;height: 700rpx;background-color: white;border-radius: 36rpx; }

js

data: {showModal: false},// 點擊彈框submit: function() {this.setData({showModal: true})},// 點擊遮蔽層隱藏preventTouchMove: function() {this.setData({showModal: false})},//點擊隱藏showHide: function() { this.setData({showModal: false})},

總結

以上是生活随笔為你收集整理的微信小程序自定义弹出框的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。