是否根据弹出窗口相对于窗口边缘的X位置更改Bootstrap弹出窗口的位置?

问题描述

我已经遍及整个互联网，尽管我发现此stackoverflow帖子很有见地，它仍然没有回答我的问题，可能是由于我的理解困难位置/偏移量.

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 Web应用程序，当您按下某个热点时，会显示信息，但我不希望在锁定水平滚动时将其显示在视口之外.

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弹出窗口的位置?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！