小程序简易弹框

小程序的简单弹框例子

//wxml 布局文件
<view class="tips" wx:if="{{showGuide}}">
    <view class="tips_hd luminous-font">
      <view class="tip">小游戏欢迎你</view>      
      <view class="tip">开始游戏哦</view>
    </view>
    <view class="tips_ft">       
      <button bindtap="startGame" class="start-btn"><image class="start-img"src="/resources/images/index/btn_bg.png"></image>开始狼人杀</button> 
    </view>
</view>

//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
    });
  },