弹出层位置动态调整

场景:点击操作按钮,让弹出层悬浮到点击的位置

/* 返回值为新的相对位置 */
reposition(target, reference) { var docH = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight, tRect = reference.getBoundingClientRect(), mRect = target.getBoundingClientRect(); /** * 根据相对视口的坐标偏移,计算新的相对位置 *(top偏移:rect的top的坐标偏移差,left偏移:rect的left坐标偏移差) **/ var tTop = tRect.top, tLeft = tRect.left, mTop = mRect.top, mLeft = mRect.left, top = target.offsetTop + (tTop - mTop) + tRect.height, left = target.offsetLeft + (tLeft - mLeft); var offsetD = tRect.y + tRect.height; if (docH - offsetD
< mRect.height) {top = top - mRect.height - tRect.height; } return { left: left, top: top }; }

 

posted @ 2018-12-11 15:00  【云】风过无痕  阅读(360)  评论(0编辑  收藏  举报