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

Dynamically change the location of the popover depending upon where it displays

本文关键字：窗口 位置 动态 显示      更新时间：2023-09-26

我想根据元素在屏幕上的位置动态更改popover的位置（左/右，上/下）。

//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中添加了一些代码，根据位置的不同，为元素添加了不同的颜色边框。边框颜色每次都会更新，表示正在调用代码并且计算正确，但位置不会更新。

看起来好像只能设置一次放置选项。我如何绕过这个限制？有没有一个变量可以被清除以重置弹出窗口？

尝试此更改，使用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';
    }

我刚刚再次检查了引导程序源代码，并意识到传递给placement属性的函数会得到传递参数。我设法实现了与您尝试的类似的事情，尝试以下操作，看看它是否适用于您：

$('a[data-rel=popover]').popover({
  offset: 10,
  placement: get_popover_placement
});
function get_popover_placement(pop, dom_el) {
  // your placement function code here
}
相关文章：