小程序弹框
最近在做小程序,发现经常会用到点击弹出来个框展示的,分享一下代码
wxss
/* 承诺书 */
.hui{
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
background: #000;
z-index: 3;
opacity: 0.3;
}
.you_know{
width: 100%;
text-align: center;
font-size:35rpx;
font-family:PingFang SC;
font-weight:500;
color:white;
background: #EF2E19;
padding: 25rpx 0;
border-radius: 14rpx 14rpx 0 0;
}
.tancns {
font-size: 26rpx;
width: 656rpx;
background: white;
position: absolute;
z-index: 999;
color: black;
border-radius: 14rpx;
top: 400rpx;
left: 47rpx;
}
.cns{
color: red;
font-size: 32rpx;
}
wxml
我已阅读并同意《承诺书》
<view class="hui" catchtouchmove="return" wx:if="{{cns}}" catchtap="guan"></view>
<view class="tancns" catchtouchmove="return" wx:if="{{cns}}">
<view class="you_know">《承诺书》</view>
<scroll-view scroll-y="true" style="height: 500rpx">
<view style="padding:28rpx">我是承诺书</view>
</scroll-view>
js
data:{
cns: false, //承诺书
}
/**
- 承诺书
*/
cnsClick() {
var that = this
that.setData({
cns: true
})
},
/**
- 承诺书关闭筛选面板
*/
guan: function () { //关闭筛选面板
this.setData({
cns: false,
})
},