效果如下圖

wxml如下：

?

<button bindtap="popup">彈出</button><!-- 彈出層 --><view class="modal-mask" bindtap="hidepopup" wx:if="{{showModal}}"></view><view class="modal-dialog" wx:if="{{showModal}}"><image bindtap='hidepopup' class="guanbi" src='關閉按鈕圖標路徑' mode="widthFix,heightFix"></image><view class="t-title">我是標題</view><image class='view-image'src="{{ detail.image.file_path}}"></image><view class="b-title">請長按圖片保存</view></view>

wcss如下

/* 彈出層 */ .modal-mask {width: 100%;height: 100%;position: fixed;top: 0;left: 0;background: #000;opacity: 0.5;z-index:1; }.modal-dialog {overflow: hidden;position: fixed;top: 15%;background: #f9f9f9;border-radius: 30rpx; right: 5%;height: 800rpx;width: 90%;z-index: 2; } .view-image{width: 580rpx;height: 580rpx;margin-left: 50rpx; } .guanbi{position:absolute;width: 40rpx;height:40rpx;background-size:100%;text-align: center; top: 10px; right: 10px;font-size: 14px;line-height: 50rpx; } .t-title{font-size:36rpx;text-align: center;margin: 30rpx 0;font-weight: bold; } .b-title{font-size:26rpx;text-align:center;margin-top:20rpx; }

js如下：

/*** 彈出按鈕點擊事件*/popup: function (e) {// console.log(e.currentTarget.dataset.id)this.setData({showModal: true})},/*** 隱藏*/hidepopup: function () {this.setData({showModal: false});},

?

?

?

如果是一個列表下有多個按鈕要彈出則可如下

wxml如下：

<button bindtap="popup" data-id="按鈕所對應的id（比如1）">彈出1</button > <button bindtap="popup" data-id="按鈕所對應的id（比如2）">彈出2</button > <button bindtap="popup" data-id="按鈕所對應的id（比如3）">彈出3</button ><!-- 彈出層 --><view class="modal-mask" bindtap="hidepopup" wx:if="{{showModal== item.id}}"></view><view class="modal-dialog" wx:if="{{showModal == item.id}}"><image bindtap='hidepopup' class="guanbi" src='關閉按鈕圖標路徑' mode="widthFix,heightFix"></image><view class="t-title">我是標題</view><image class='view-image'src="相關的圖片路徑"></image><view class="b-title">請長按圖片保存</view></view>

wcss如下：

/* 彈出層 */ .modal-mask {width: 100%;height: 100%;position: fixed;top: 0;left: 0;background: #000;opacity: 0.5;z-index:1; }.modal-dialog {overflow: hidden;position: fixed;top: 15%;background: #f9f9f9;border-radius: 30rpx; right: 5%;height: 800rpx;width: 90%;z-index: 2; } .view-image{width: 580rpx;height: 580rpx;margin-left: 50rpx; } .guanbi{position:absolute;width: 40rpx;height:40rpx;background-size:100%;text-align: center; top: 10px; right: 10px;font-size: 14px;line-height: 50rpx; } .t-title{font-size:36rpx;text-align: center;margin: 30rpx 0;font-weight: bold; } .b-title{font-size:26rpx;text-align:center;margin-top:20rpx; }

?

js如下：

/*** 按鈕點擊事件*/popup: function (e) {// console.log(e.currentTarget.dataset.id)this.setData({showModal: e.currentTarget.dataset.id})},/*** 隱藏*/hidepopup: function () {this.setData({showModal: ""});},

?

文章參考來源：https://blog.csdn.net/qq_42415827/article/details/84648463

總結

以上是生活随笔為你收集整理的微信小程序点击按钮实现弹出模态框的全部內容，希望文章能夠幫你解決所遇到的問題。

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