小程序简易弹框

小程序的简单弹框例子

//wxml 布局文件

    
      小游戏欢迎你      
      开始游戏哦
    
           
      开始狼人杀 
    


//wxss 样式文件
.tips {
    position: absolute;
    top: 5%;
    bottom: 12%;
    left: 10%;
    right: 10%;
    z-index: 999;
    height: 85%;
    padding: 32rpx 20rpx;
    background: rgba(0,0,0,0.8);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: column;
    border-radius: 10px;
    box-shadow: 0px 0px 40px blue;
}

.tips_hd {
    font-size: 11pt;
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 76rpx;
    margin-top: 40rpx;
}

.tips_hd .tip {
    font-size: 17pt;
    display: flex;
    align-items: center;
    justify-content: center;
    
}
.luminous-font {
text-shadow: 0 0 10px #02AEFF,0 0 20px #02AEFF,0 0 30px #02AEFF,0 0 40px #02AEFF,0 0 70px #02AEFF,0 0 80px #02AEFF,0 0 100px #02AEFF,0 0 150px #02AEFF;
}

.tips .tips_ft {
    display: flex; 
    flex-direction: row;
    justify-content: space-around;
    width: 100%; 
    margin-top: -100rpx;

}
.start-img{
    width:480rpx;
    height:160rpx;
    position:absolute;
    top:0;
    left:0;
    z-index:-10;
}
.start-btn{
    position:absolute;
    width:480rpx;
    height:160rpx;
    line-height:160rpx;
    border-radius:40rpx;
    background:transparent;
    color:#fff;
}
//js文件
 data: {
    showGuide:!0,
  },
 startGame: function () {
    this.setData({
      showGuide: !1
    });
  },