微信小程序 弹窗

1、一闪而过的提示窗

官方文档：https://developers.weixin.qq.com/miniprogram/dev/api/ui/interaction/wx.showToast.html

wx.showToast({
      title: '保存成功',
      icon: 'none',
      duration: 1000
    })

2、是否确认弹窗

官方文档：https://developers.weixin.qq.com/miniprogram/dev/api/ui/interaction/wx.showModal.html

wx.showModal({
  title: '提示',
  content: '是否删除该选项？',
  success (res) {
    if (res.confirm) {
      console.log('用户点击确定')
    } else if (res.cancel) {
      console.log('用户点击取消')
    }
  }
})

3、只能确定的提示窗

wx.showModal({
      title: '提示',
      content: '您的信息已经录入完毕，请回到首页吧！',
      showCancel: false,
      success (res) {
        if (res.confirm) {
          console.log('用户点击确定')
        }
      }
    })

 

4、自定义弹窗

WXML

<view class="black">
  <view class="black-box">
    <view class="black-title">路西德攻略</view>
    <view class="black-content">
      <text>第一阶段路西德不会动，但是会不断召唤小怪。普通模式下召唤出来的小怪受到的单段伤害固定，因此建议用多段技能清；而困难模式下伤害正常计算。</text>
    </view>
    <view class="black-footer">
      <view class="btn-confirm">关闭</view>
    </view>
  </view>
</view>

 

WXSS

 

.black {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  overflow: hidden;
  z-index: 9000;
  color: #fff;
}

.black-box {
  width: 540rpx;
  overflow: hidden;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;
  background: #f9f9f9;
  border-radius: 36rpx;
}

.black-title {
  padding-top: 40rpx;
  font-size: 34rpx;
  color: #030303;
  text-align: center;
  font-weight: bold;
}

.black-content {
  font-size: 28rpx;
  line-height: 36rpx;
  color: #999;
  padding: 30rpx 32rpx 50rpx;
}

.black-content text {
  display: inline-block;
}

.black-footer {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 100rpx;
  font-size: 34rpx;
  line-height: 86rpx;
}

.black-footer .btn-confirm {
  width: 220rpx;
  height: 60rpx;
  font-size: 32rpx;
  background-color: #329acd;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  border-radius: 8rpx;
}