根据弹出窗口相对于窗口边缘的 X 位置更改 Bootstrap 弹出窗口的位置? [英] Changing the position of Bootstrap popovers based on the popover's X position in relation to window edge?

问题描述

我已经在互联网上广泛搜索，虽然我发现这篇 stackoverflow 帖子很有见地 是否可以根据屏幕宽度更改 Bootstrap 弹出框的位置?，它仍然没有回答我的问题，可能是因为我理解困难位置/偏移量.

I have scoured the Internet far and wide and while I found this stackoverflow post insightful Is it possible to change the position of Bootstrap popovers based on screen width?, it still didn't answer my question, likely due to my trouble understanding position/offset.

这就是我想要做的.我希望 Twitter Bootstap Popover 的位置是 RIGHT，除非热点 popover 将被定位在视口之外，然后我希望它被定位在 LEFT.我正在制作一个具有热点的 iPad 网络应用程序，当你按下一个热点时，信息会出现，但我不希望它在水平滚动被锁定时出现在视口之外.

Here's what I'm trying to do. I want the Twitter Bootstap Popover position to be RIGHT unless the hotspot popover will be positioned beyond the viewport, then I want it to be positioned LEFT. I'm making an iPad web app that has hot spots, when you push on a hotspot, information appears but I don't want it to appear outside of the viewport when horizontal scrolling is locked.

我认为它会是这样的:

$('.infopoint').popover({
        trigger:'hover',
        animation: false,
        placement: wheretoplace 
    });
    function wheretoplace(){
        var myLeft = $(this).offset.left;

        if (myLeft<500) return 'left';
        return 'right';
    }

想法?谢谢！

推荐答案

我刚刚注意到 placement 选项可以是 string 或 函数返回一个字符串，每次您点击可弹出链接时都会进行计算.

I just noticed that the placement option could either be a string or a function returning a string that makes the calculation each time you click on a popover-able link.

这使得在没有初始 $.each 函数的情况下复制您所做的事情变得非常容易:

This makes it real easy to replicate what you did without the initial $.each function:

var options = {
    placement: function (context, source) {
        var position = $(source).position();

        if (position.left > 515) {
            return "left";
        }

        if (position.left < 515) {
            return "right";
        }

        if (position.top < 110){
            return "bottom";
        }

        return "top";
    }
    , trigger: "click"
};
$(".infopoint").popover(options);

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