如何使当点击弹框外的区域,弹框消失?
发布于 7 年前 作者 kchen 7736 次浏览 来自 官方Issues

我想要点击弹框以外的区域,使弹框消失,应该怎样写,如果可以请附上代码片段,谢谢

2 回复
代码附上,你把数据赋上看看效果
 'tipsContainer'>
        "tipsPageClose" bindtap="tipsPageClose">
        "tipsContent">
            "tipsImg" src="{{tipsInfo.tipsImg}}" mode="widthFix">
            "tipsMain">
                {{tipsInfo.tipsText}}
            
            'tipsName'>——{{tipsInfo.tipsName}}
            "tipsAI">
                "tipsEWM" src="{{tipsInfo.tipsQRCode}}">
                {{tipsInfo.AIIntro}}
            
            "tipsClose" bindtap="tipsPageClose" src="../../images/public/close1.png">
        
    
.tipsContainer {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 5000;
}

.tipsContent {
  width: 535rpx;
  background: #121d3b;
  border-radius: 20rpx;
  position: relative;
  padding: 30rpx;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -40%);
  z-index: 1100;
}

.tipsImg {
  width: 100%;
  min-height: 334rpx;
}

.tipsMain {
  font-size: 36rpx;
  line-height: 54rpx;
  color: #fff;
  width: 90%;
  position: relative;
  left: 50%;
  transform: translate(-50%, 0);
  margin-top: 30rpx;
}

.tipsName {
  text-align: right;
  font-size: 24rpx;
  color: #fff;
}

.tipsAI {
  font-size: 24rpx;
  color: #fff;
  display: flex;
  padding: 0 20%;
  justify-content: space-around;
  align-items: center;
  margin-top: 50rpx;
}

.tipsEWM {
  width: 100rpx;
  height: 100rpx;
}

.tipsClose {
  width: 60rpx;
  height: 60rpx;
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0);
  margin-top: 60rpx;
  border-radius: 100%;
}

.tipsPageClose {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: rgba(0, 0, 0, 0.5);
}
回到顶部