关于自定义模态框的实现
在做微信小程序时,原本想的是官方组件可能会提供自定义模态框,当然微信小程序的确有模态框(api里)但是往往不能满足我们的需求。原生手写模态框
wxml
<view wx:if="{{showPowerPriceView}}">
<view class='bg_layer'>
<view class="power-price-box power-price-flex">
自定义内容
</view>
</view>
</view>
js文件
// 打开模态框
showPowerPrice: function() {
this.setData({
showPowerPriceView: true
})
},
// 关闭模态框
closeModal: function () {
this.setData({
showPowerPriceView: false
})
}
wxss
蒙层
.bg_layer {
position: fixed;
left: 0;
top: 0;
bottom: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.6);
z-index: 9998;
}
自定义模态框内容,居中显示
.power-price-box {
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 80%;
height: 600rpx;
background: rgba(232, 240, 255, 1);
border-radius: 10rpx;
z-index: 9999;
}
每一个人心中都有一团火,路过的人只看到烟!