bootstrap中的popover.js

Question

这里是官网上popover的例子：popover demo

点击后我发现popover的那个div是加在body上的，我就想知道那个东西是怎么计算坐标的，怎么就那么规规矩矩的跑到属于自己的那个button周围的？

谢谢。

Answer 1

jQuery 中 offset() 可以获得某元素左上角相对文档的偏移

Answer 2

无论是你点了button，还是其它事件，都可以得到button的当前位置信息。 jquery中有offset()方法来获取button的位置信息。 都知道button的位置了，那么，那个隐藏的，自动创建的小弹层位置就可以确定啦。

Answer 3

var pos          = this.getPosition()
  var actualWidth  = $tip[0].offsetWidth
  var actualHeight = $tip[0].offsetHeight

  if (autoPlace) {
    var $parent = this.$element.parent()

    var orgPlacement = placement
    var docScroll    = document.documentElement.scrollTop || document.body.scrollTop
    var parentWidth  = this.options.container == 'body' ? window.innerWidth  : $parent.outerWidth()
    var parentHeight = this.options.container == 'body' ? window.innerHeight : $parent.outerHeight()
    var parentLeft   = this.options.container == 'body' ? 0 : $parent.offset().left

    placement = placement == 'bottom' && pos.top   + pos.height  + actualHeight - docScroll > parentHeight  ? 'top'    :
                placement == 'top'    && pos.top   - docScroll   - actualHeight < 0                         ? 'bottom' :
                placement == 'right'  && pos.right + actualWidth > parentWidth                              ? 'left'   :
                placement == 'left'   && pos.left  - actualWidth < parentLeft                               ? 'right'  :
                placement

}

这个是关于popover查找位置的源码，他是通过，计算元素长，宽，确定位置。

pos是该元素位置坐标。

如果不规定摆放位置，会自动计算宽度是不是够放。