点击弹出窗之外的区域 隐藏弹出窗 和Animate.css配合

document.addEventListener("click", (e) => {
      const clicklogin = document.getElementsByClassName("login")[0];
      const loginbox = document.getElementById("gotologin");
      const boxindex = e.path.findIndex((item) => item == loginbox);
      if (e.target != clicklogin && boxindex == -1) {
        document.body.removeAttribute("style");          //这行是控制隐藏之后恢复可以滑动页面
        const animatesty = document.getElementById("gotologin");
        animatesty.classList.remove("animate__zoomIn");  //把进入动画类名移除 进入动画和消失动画不能同时存在 点击显示的时候同理
        animatesty.classList.add("animate__zoomOut");   //添加消失动画
        window.setTimeout(() => {                       //设置定时器是因为消失动画有时间的 如果不设置 会出现在消失的时候立刻调整位置
          const becauseanimate = document.getElementById("becauseanimate");  //后面的代码是因为我设置了拖拽效果 所以要设置隐藏的时候把位置改成默认值
          becauseanimate.style.top = "50%";
          becauseanimate.style.left = "50%";
        }, 300);
      }
    });

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值