hugh 的个人博客

1. 页面本身的toast 或者弹窗

我们可以基于fixed的层，进行排布，居中或置顶xx%

2. 如果页面本身被嵌入了一个iframe, iframe大小又不可控的情况下

如果还使用1中描述的方式， 将会出现以下位置的偏差， 如下

 

修复方式

基于点击和默认窗口高度，计算出实际的top值

iframe-alert {
  position: absolute;
} 

resetTopOffset() {
      if(type !== "partner") {
        this.topOffset("20%");
        return;
      }
      // https://developer.mozilla.org/zh-CN/docs/Web/API/MouseEvent/pageX, 默认800兼容不支持pageY的情况
      var ev = window.event;
      let baseHeight = 500
      if(ev && ev.pageY > 40) {
        // 直接取事件对应的偏移
        this.topOffset((ev.pageY - 40) + "px");
      } else {
        // 取当前窗口 top + 视窗大小的一半
        this.topOffset(($("html").scrollTop() + baseHeight/2) + "px");
      }
    }