收藏
回答

如何使当点击弹框外的区域,弹框消失?

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

回答关注问题邀请回答
收藏

2 个回答

  • 陈强
    陈强
    2020-08-13
    代码附上,你把数据赋上看看效果
     '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);
    }
    


    2020-08-13
    有用
    回复
  • 雨天
    雨天
    2020-08-13

    https://ask.csdn.net/questions/686506

    2020-08-13
    有用
    回复 1
    • 雨天
      雨天
      2020-08-13
      你和他反补
      2020-08-13
      回复
登录 后发表内容
问题标签