如何确保Twitter引导程序弹出窗口可见？ [英] How can you ensure twitter bootstrap popover windows are visible?

问题描述

有没有人知道twitter bootstrap的popover组件的扩展，它会动态更改放置选项以确保弹出窗口显示在屏幕上？

Does anyone know of an extension to the popover component of twitter bootstrap that dynamically changes the placement option to ensure that the popover displays on the screen?

推荐答案

展示位置可以是函数而不是字符串。由 fat <​​/ strong>编写的自动放置示例，然后通过 wleeper 移植到最新版本的bootstrap，这是项目中的github问题之一： https://github.com/twitter/bootstrap/issues/345

The placement can be a function instead of a string. An example of auto placement written by fat and then ported to the most recent version of bootstrap by wleeper is in one of the github issues on the project here: https://github.com/twitter/bootstrap/issues/345

以下是将CoffeeScript编译为JavaScript的结果：

Here is the result of compiling the CoffeeScript to JavaScript:

$("a[rel=popover]").popover({
  placement: function(tip, element) {
    var $element, above, actualHeight, actualWidth, below, boundBottom, boundLeft, boundRight, boundTop, elementAbove, elementBelow, elementLeft, elementRight, isWithinBounds, left, pos, right;
    isWithinBounds = function(elementPosition) {
      return boundTop < elementPosition.top && boundLeft < elementPosition.left && boundRight > (elementPosition.left + actualWidth) && boundBottom > (elementPosition.top + actualHeight);
    };
    $element = $(element);
    pos = $.extend({}, $element.offset(), {
      width: element.offsetWidth,
      height: element.offsetHeight
    });
    actualWidth = 283;
    actualHeight = 117;
    boundTop = $(document).scrollTop();
    boundLeft = $(document).scrollLeft();
    boundRight = boundLeft + $(window).width();
    boundBottom = boundTop + $(window).height();
    elementAbove = {
      top: pos.top - actualHeight,
      left: pos.left + pos.width / 2 - actualWidth / 2
    };
    elementBelow = {
      top: pos.top + pos.height,
      left: pos.left + pos.width / 2 - actualWidth / 2
    };
    elementLeft = {
      top: pos.top + pos.height / 2 - actualHeight / 2,
      left: pos.left - actualWidth
    };
    elementRight = {
      top: pos.top + pos.height / 2 - actualHeight / 2,
      left: pos.left + pos.width
    };
    above = isWithinBounds(elementAbove);
    below = isWithinBounds(elementBelow);
    left = isWithinBounds(elementLeft);
    right = isWithinBounds(elementRight);
    if (above) {
      return "top";
    } else {
      if (below) {
        return "bottom";
      } else {
        if (left) {
          return "left";
        } else {
          if (right) {
            return "right";
          } else {
            return "right";
          }
        }
      }
    }
  }
});

除了一个案例外，它对我有用：如果项目在右上角那里对于弹出窗口来说，这不是一个很好的选择，它是其中一个选项，它显示在屏幕上。

It is working well for me except for one case: if the item is in the upper right corner there is no good spot for the popover to appear that is one of the options and it appears partially off the screen.

这篇关于如何确保Twitter引导程序弹出窗口可见？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！