弹窗位置在视口中位置自适应

最新推荐文章于 2025-05-05 16:53:03 发布

weixin_49477258

最新推荐文章于 2025-05-05 16:53:03 发布

阅读量462

点赞数

CC 4.0 BY-SA版权

分类专栏： js 文章标签： js

本文链接：https://blog.csdn.net/weixin_49477258/article/details/117154461

js 专栏收录该内容

6 篇文章

订阅专栏

该代码实现了一个根据用户点击位置和视口尺寸智能计算弹窗显示位置的算法，确保弹窗优先显示在点击项的右下侧，同时考虑了多种边界情况，确保弹窗在屏幕内的合适展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

/**
 * 获取弹窗位置 （优先右下侧显示）
 * dialogW : 弹窗 宽
 * dialogH ：弹窗 高
 * viewW : 视口 宽 （弹窗的父级）
 * viewH ：视口 高
 * itemX : 点击项相对视口的X坐标
 * itemY ：点击项相对视口的Y坐标
 * itemW : 点击项的宽
 * itemH : 点击项的高
 * clearance : 间隙大小（默认为6）
 */
const createDetailStyle = (dialogW, dialogH, viewW, viewH, itemX, itemY, itemW, itemH, clearance = 6) => {
  // debugger
  let top = 0
  let left = 0
  // left
  // 点击项右侧宽度 大于 弹窗宽度 + 间隙
  if (viewW - itemX - itemW - clearance > dialogW) {
    left = itemX + itemW + clearance
  // 点击项左侧宽度 大于 弹窗宽度 + 间隙
  } else if (itemX - clearance > dialogW) {
    left = itemX - clearance - dialogW
  // 点击项中间距离视口右侧的距离 大于 弹窗宽度
  } else if (viewW - itemX - itemW / 2 > dialogW) {
    left = viewW - dialogW
  // 点击项中间距离视口左侧的距离 大于 弹窗宽度
  } else if (itemX + itemW / 2 > dialogW) {
    left = 0
  // 点击项中间距视口左右距离 小于 弹窗宽度
  } else {
    left = viewW - dialogW
  }
  // top
  // 24 为弹窗距离视口下边距离最小为24
  // 点击项上边框距离视口底边 大于 弹窗高度
  if (viewH - itemY - 24 > dialogH) {
    top = itemY
  // 点击项上边框距离视口顶边 大于 弹窗高度
  } else if (itemY > dialogH) {
    top = itemY - dialogH
  // 点击项上边框距离视口上下边框 都小于 弹窗高度
  } else {
    top = viewH - dialogH - 24
  }
  return { t: top, l: left }
}