javascript - 根据显示位置动态更改弹出窗口的位置

Question

我想根据元素在屏幕上的位置动态更改弹出窗口的位置(左/右、上/下)。

//get_popover_placement(dom_el) returns 'left', 'right', 'top', or 'bottom'
    function set_popover(dom_el) {
    var the_placement = get_popover_placement(dom_el);
    $(dom_el).popover({
        offset: 10,
        placement: the_placement
    }).popover('show');
}

//set the placement on every hover
$('a[data-rel=popover]').hover(function(){
        set_popover(this);
    }, function(){});

它第一次工作，但如果元素的位置发生变化(例如，当窗口调整大小时)，则不会通过后续调用 set_popover 来更新位置。

我向 get_popover_placement 添加了一些代码，根据位置为元素添加不同颜色的边框。边框颜色每次都会更新，表示正在调用代码并且正在正确完成计算，但放置不会更新。

放置选项似乎只能设置一次。我怎样才能绕过这个限制？是否有某个变量可以清除以重置弹出窗口？

Answer 1

试试这个改变，使用 jQuery 中的 .on() 函数来附加一个事件监听器:

通过更新 Kevin Ansfield 的 - 将代码添加到放置函数来更改此回复。

    $('a[data-rel=popover]').popover({
      placement: get_popover_placement
    });

    function get_popover_placement(pop, dom_el) {
      var width = window.innerWidth;
      if (width<500) return 'bottom';
      var left_pos = $(dom_el).offset().left;
      if (width - left_pos > 400) return 'right';
      return 'left';
    }