js实现弹窗在点击每个按钮后出现在屏幕不同位置的方法

<div class="add_alert" style="display:none">
	<div class="add_alert_main">
       <div class="triangle"></div>
       <div class="add_option"></div>
       <div class="add_button">
           <button class="btn_cancel btn_group">取消</button>
           <button class="btn_confirm btn_group">添加</button>
       </div>
   </div>
</div>
<div class="add_toast">
    <div class="add_toast_main">
        <div class="icon_add">
            <span class="icon_add_img"></span>
        </div>
        <div class="add_text">
            添加成功
        </div>
    </div>
</div>

// 原始数据集合
var needPopverTipMap = [
  ['教育', '学校'],
  ['卫健委', '医疗'],
  ['交通', '运输物流'],
  ['工信', '信息技术', '电信行业'],
  ['农业', '农林牧渔'],
  ['住建', '建筑业'],
  ['城管', '市政'],
  ['人行', '金融业']
]
// 常量化索引
var nowSelectIndex = -1
var allNeedTipIndexMap = {}
needPopverTipMap.map(function (v, index) {
  v.map(function (s) {
    allNeedTipIndexMap[s] = index
  })
})
// 获取提示文字
function getNeedPopverTip (str) {
  str = str.trim()
  var findIndex = allNeedTipIndexMap[str]
  if (typeof findIndex === 'number') {
    nowSelectIndex = findIndex
    var outTip = needPopverTipMap[findIndex].filter(function (v) {
      return v !== str
    })
    return '根据您的选择，推荐添加【'+ outTip.join(',') +'】'
  } else {
    nowSelectIndex = -1
    return ''
  }
}

// 控制提示框
function showNeedPopver (show, e) {
  if (show) {
    var nowStr = getNeedPopverTip($(e.target).text())
    if (nowStr !== '') {
      var tipDom = $('.add_alert')
      tipDom.show().attr('data-index', allNeedTipIndexMap[$(e.target).text()])
      tipDom.find('.add_option').text(nowStr)
      // 计算及调整显示位置
      var computeCoordinateForPop = {
        w: tipDom[0].offsetWidth,
        h: tipDom[0].offsetHeight
      }
      var nowSelectDom = $(e.target)
      var computeCoordinateForNow = {
        w: nowSelectDom[0].offsetWidth,
        h: nowSelectDom[0].offsetHeight,
        t: nowSelectDom.offset().top,
        l: nowSelectDom.offset().left
      }

      var isTop = e.clientY <= (document.documentElement.clientHeight / 2)
      var isLeft = e.clientX <= (document.documentElement.clientWidth / 2)
      var cententValue = (document.body.offsetWidth - computeCoordinateForPop.w) / 2

      tipDom.css({
        top: isTop ? (computeCoordinateForNow.t + computeCoordinateForNow.h + 8) : (computeCoordinateForNow.t - computeCoordinateForPop.h - 8),
        left: isLeft ? computeCoordinateForNow.l : cententValue
      })

      var arrowDom = tipDom.find('.triangle')
      arrowDom.css({
        top: isTop ? '-14px' : 'initial',
        bottom: !isTop ? '-14px' : 'initial',
        transform: isTop ? 'rotate(180deg)' : 'rotate(0)',
        left: isLeft ? (computeCoordinateForNow.l + 'px') : (computeCoordinateForNow.l - computeCoordinateForNow.w / 2) + 'px'
      })

    } else {
      return showNeedPopver(false)
    }
  } else {
    $('.add_alert').hide()
  }
}

// 弹窗取消按钮
$('.btn_cancel').on('click', showNeedPopver.bind(this, false))
// 弹窗确定按钮
$('.btn_confirm').on('click',function(){
  showNeedPopver(false)
  var buttons = $('.select-area-box .list button')
  buttons.each(function () {
    var btnStr = $(this).text()
    var tempD = $(this)
    if (nowSelectIndex !== -1) {
      needPopverTipMap[nowSelectIndex].map(function (v) {
        if (btnStr === v) {
          tempD.addClass('active')
        }
      })
    }
  })
  findSelectedIndustry();
  $('.add_toast').fadeIn()
  setTimeout(function() {
    $('.add_toast').fadeOut()
  }, 1500)
})

/* ---E 行业推荐弹窗 @date 2021/4/1 ---*/