微信小程序点击按钮实现弹出模态框

效果如下图

wxml如下：

弹出我是标题请长按图片保存

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如下：

弹出1
弹出2
弹出3我是标题请长按图片保存

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

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！