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

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';
    }

Answer 2

我刚刚再次检查了bootstrap源,并意识到传递给placement属性的函数会被传递参数.我设法实现了与您尝试的类似的东西,尝试以下内容并查看它是否适合您:

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

function get_popover_placement(pop, dom_el) {
  // your placement function code here
}