小程序弹框弹窗

小程序弹框

最近在做小程序，发现经常会用到点击弹出来个框展示的，分享一下代码

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,

})

},