微信小程序长页面中弹框如何居中

微信小程序长页面中弹框如何居中

微信小程序长页面中弹框居中的案例：

在对应的wxml文件中添加以下代码：

<formbindsubmit="formSubmit"bindreset="formReset">
<viewclass="commodity_screen"bindtap="hideModal2"wx:if="{{!flag}}"></view>
<viewclass="wx-popup"style="margin:-{{windowHeight/2}}px00-{{windowWidth/2}}px"hidden="{{flag}}">
<viewclass='popup-container'>
<viewclass="wx-popup-title">添加备注</view>
<viewclass="wx-popup-con">
<viewclass="input">
<inputclass="inputRemark"name="nickName"value="{{nickName}}"placeholder="请输入备注"bindinput="remarkInput"/>
</view>
</view>
<viewclass="wx-popup-btn">
<buttonclass="btn-no"formType="reset"bindtap='hideModal2'>取消</button>
<buttonclass="btn-no"formType="submit">确认</button>
</view>
</view>
</view>
</form>

在对应的js文件中添加以下代码：

Page({
data:{
windowWidth:'',
windowHeight:'',
},
onShow:function(){
//获得系统信息:获得当前屏幕可见区域的宽和高
wx.getSystemInfo({
success:function(res){
that.setData({
"windowWidth":res.windowWidth,//可以使用窗口宽度，单位px
"windowHeight":res.windowHeight,//可以使用窗口高度，单位px
})
console.log(res.windowWidth,that.data.windowWidth);
console.log(res.windowHeight,that.data.windowHeight);
},
})
},
})

在对应的wxss文件中添加以下代码:

.wx-popup{
position:fixed;
z-index:2000;
}
.popup-container{
position:fixed;
left:50%;
top:50%;
width:80%;
max-width:600rpx;
background:#fff;
z-index:2000;
}

本文来源：https://www.yuntue.com/post/79696.html | 云服务器网，转载请注明出处！