Question

我喜欢让我的弹出窗口保持打开状态，直到用户明确关闭它们为止。

新Bootstrap Popovers的一个不错的功能是，当用户更改设备方向，滚动或调整窗口大小时，它们会自动重新定位。他们甚至在内容重新流动时跟随 - 例如当一个段落被包裹，并且当你调整窗口大小时元素的长度会增大或缩小 - 屏幕上的所有弹出窗口都将保持重新定位以接近目标。

Popover插件如何知道页面正在重新流动，以便触发弹出窗口重新定位？

我的网络应用是动态的，用户操作导致元素增长/缩小，切换开/关等等。目前，当我通过代码更改页面时，弹出窗口被遗忘 - 他们不会重新获得 - 在他们的目标附近定位。

作为一个用户，一个解决方法就是稍微滚动一下屏幕，Bootstrap将重新定位弹出框，一切看起来都是正确的。

当我通过代码更改页面布局时，我试图想出一种重新定位弹出窗口的方法。

因此问题是：Popover如何重新定位工作（我可以挂钩，以便我可以自动触发它）。

编辑：我刚刚注意到，如果＆＃34;动态＆＃34;那么它们将会重新定位。内容恰好是Bootstrap navbar折叠/展开，因为点击navbar-toggler。

Answer 1

这个问题有两个部分。

popper.js如何知道何时更新弹出窗口？
弹出窗口如何改变位置？

向后回答：

2：弹出窗口如何改变位置？

您需要popover的更新方法：

$('#element').popover('update')

我在这里做了一个快速演示：

https://jsfiddle.net/pktyptyp/

首先，单击绿色按钮以打开弹出窗口。然后使用按钮2移动弹出切换按钮。现在，切换和弹出窗口不再对齐。所以最后使用按钮3通过切换来重新定位弹出框。

这里的文档隐藏在这里的popover方法部分：

http://getbootstrap.com/docs/4.0/components/popovers/#methods

如果您想要更新页面上的每个弹出窗口而不仅仅是特定的弹出窗口，那么您可以这样做：

$('[data-toggle="popover"]').popover('update')

popper.js如何知道何时更新弹出窗口？

Popper将订阅window.scroll和window.resize等事件。你可以在他们的源代码中看到这一点：

https://github.com/FezVrasta/popper.js/blob/master/packages/popper/src/utils/setupEventListeners.js

更新方法不会立即在该事件处理程序中调用 - 这将被传递回Boostrap小部件，而小部件又会调用popover update方法。 / p>

我相当确定Popper＆amp; Popover小部件不会查看单个切换的位置。这部分是因为除非定位了肘节，否则它们的左/上属性将永远是“自动”。所以如果它们正在移动就很难解决。换句话说，当窗口滚动时，切换没有在文档中移动，但是弹出窗口（绝对定位）需要更新。所以这是一个广泛的刷子 - 他们正在寻找整个窗口的变化，假设弹出窗口不合适，然后触发更多事件来更新它们。

如果有人对此有更多了解，请在评论中告诉我！

您知道何时更改用户界面有一些优势，因此您可以拨打“更新”字样。所有的Popovers随意。这对我来说似乎是理想的方法。

但是，如果您的切换位置绝对正确，您可以通过观察其位置来更自动地执行此操作。这是一个带有绝对定位切换的示例，在此示例中，弹出窗口会自动移动，而不会点击第三个按钮。

https://jsfiddle.net/pktyptyp/1/

Answer 2

我不知道逻辑是如何工作的，因为在Bootstrap上我们使用Popper.js来处理它，所以如果你想了解背后的逻辑，你可以浏览它：https://github.com/FezVrasta/popper.js

Bootstrap 4 - 自动Popover重新定位如何工作？

2 个答案:

2：弹出窗口如何改变位置？

popper.js如何知道何时更新弹出窗口？