效果展示:
wxml页面:
<view class='modal-mask' wx:if='{{showModal}}'><view class="modal-container"><view class='modal-content'></view><view class='modal-footer' bindtap="closeImage">//这个/images/index/close.png的路径是关闭按钮图片,本人从阿里矢量图网站下载根据自己需求寻找,存入本地即可<image src="/images/index/close.png" style="width: 80rpx; height: 80rpx;"/></view></view>
</view>
wxss页面:
/*遮罩层*/
.modal-mask {display: flex;justify-content: center;align-items: center;position: fixed;left: 0;right: 0;top: 0;bottom: 0;background-color: rgba(0, 0, 0, 0.8);z-index: 999;
}.modal-container {display: flex;flex-direction: column;
}/*遮罩内容*/
.modal-content {display: flex;flex-direction: column;width: 100vw;height: 450rpx;background-image: url(https://xxx/library/xcx_pop_img/xxx.jpg); //图片路径,根据自己的写background-repeat:no-repeat;background-size:100% 100%;-moz-background-size:100% 100%;
}.modal-footer {height: 80rpx;width: 100%;margin-top: 80rpx;text-align: center;
}
js页面:
data: {showModal:true, //弹窗显示},
// 关闭弹窗closeImage:function(e) {this.setData({showModal:false})},