hugh 的个人博客

Everyday is a new day

修复弹窗或者toast在页面被嵌入iframe展示的问题

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");
      }
    }

 

 


标题:修复弹窗或者toast在页面被嵌入iframe展示的问题
作者:hugh0524
地址:https://blog.uproject.cn/articles/2019/10/17/1571286186229.html

0 浏览