效果图:
我之前用vant 的popup的弹窗写,会出现close图标移动到弹窗内容外部不可见。
自定义代码:
popup.JS/*** 生命周期函数--监听页面初次渲染完成*/onReady() {//自定义弹窗 动态获取屏幕高度var that = this;wx.getSystemInfo({success: (result) => {that.setData({height: result.windowHeight});},})},closePopup 关闭自定义弹窗closePopup(){this.setData({showCode:false})}data(){height:'',showCode:false}popup.wxml<view catchtouchmove="{{true}}" class="popup-box" wx:if="{{showCode}}" bindtap="closePopup"></view><view class="info-center" wx:if="{{showCode}}" style="top:{{height*0.25}}px;height:{{height*0.4}}px;" ><image src="../../static/market/market-tianmu-code.png" class="out-adv" mode="widthFix"></image> 弹窗内容,我比较懒切的图<image src="https://xxx.com/close.png" class="close-icon" mode="widthFix" bindtap="closePopup"></image></view>
</view>popup.wxss/* 蒙层 */
.popup-box{position: fixed;z-index: 998;top: 0;background-color: rgba(0, 0, 0, 0.7);width: 100%;height: 100%;
}
/* 中 */
.info-center{position: fixed;z-index: 999;background-color: none;display: flex;align-items: center;justify-content: center;flex-direction: column;border-radius: 10rpx;width: 90%;gap: 20px;margin-left: 5%;margin-right: 5%;
}
.close-icon{width: 50rpx;height: 50rpx;position: absolute;bottom: -70rpx;left: 50%;margin-left: -25rpx;
}