根据显示的位置动态更改弹出窗口的位置 [英] Dynamically change the location of the popover depending upon where it displays

问题描述

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

I'd like to dynamically change the popover placement (left/right, top/bottom) depending on where the element is located on the screen.

//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不会更新展示位置。

It works the first time, but if the position of the element changes (when the window is resized, for example), the placement is not updated with subsequent calls to set_popover.

我为get_popover_placement添加了一些代码，为元素添加了不同的颜色边框，具体取决于在安置。边框颜色每次都会更新，表示正在调用代码并且计算正在正确完成，但展示位置不会更新。

I added a little bit of code to get_popover_placement that adds a different color border to the element, depending on the placement. The border color gets updated every time, indicating the code is being called and the calculations are being done correctly, but the placement does not get updated.

看起来好像是展示位置选项只能设置一次。我怎样才能解决这个限制？是否有一个可以清除以重置弹出框的变量？

It appears as though the placement option can only be set one time. How can I get around this limitation? Is there a variable somewhere that can be cleared to reset popovers?

推荐答案

使用.on尝试此更改（ ）函数在jQuery中附加一个事件监听器：

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

Changed this reply by updating Kevin Ansfield's - added code to the placement function.

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

这篇关于根据显示的位置动态更改弹出窗口的位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！