.pop {
  visibility: hidden;
}
.pop--show {
  visibility: visible;
}
.pop__mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  background: rgba(0, 0, 0, 0.7);
  display: none;
}
.pop__mask--hide {
  background: transparent;
}
.pop__container {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate3d(-50%, -50%, 0);
  transform-origin: center;
  transition: all 0.4s ease;
  z-index: 11;
  opacity: 0;
}
.pop--show .pop__container {
  opacity: 1;
}
.pop--show .pop__mask {
  display: block;
}

/* 显示方向 */
/* 左侧popup */
.pop--left .pop__container {
  left: 0;
  top: 50%;
  transform: translate3d(-100%, -50%, 0);
}
.pop--show.pop--left .pop__container {
  transform: translate3d(0, -50%, 0);
}

/* 右侧popup */
.pop--right .pop__container {
  right: 0;
  top: 50%;
  left: auto;
  transform: translate3d(100%, -50%, 0);
}
.pop--show.pop--right .pop__container {
  transform: translate3d(0, -50%, 0);
}

/* 底部popup */
.pop--bottom .pop__container {
  top: auto;
  left: 50%;
  bottom: 0;
  transform: translate3d(-50%, 100%, 0);
}
.pop--show.pop--bottom .pop__container {
  transform: translate3d(-50%, 0, 0);
}

/* 顶部popup */
.pop--top .pop__container {
  top: 0;
  left: 50%;
  transform: translate3d(-50%, -100%, 0);
}
.pop--show.pop--top .pop__container {
  transform: translate3d(-50%, 0, 0);
}