当多个弹出窗口打开时，如何将选定（单击）引导弹出窗口向前移动？

Question

我在 D3 中的 svg 元素上使用引导弹出框。可以在任何给定时间打开多个弹出窗口。我想知道的是如何在点击后面的弹出框时强制它移动到前面，即被关注？

有没有办法增加单个弹出框的 z-index 以手动将其向前移动？

谢谢。

编辑：

我已经设法使用建议的答案创建了一个小提琴。出现的问题是，使用全局变量，它会在最前面的弹出框上正确增加 z-index，但是在将一个放到前面之后，我无法访问其他的，即甚至单击后面的那些...所以点击处理程序甚至没有被调用。我在想有某种类型的分层正在发生。例如：如果您查看子节点并单击一个（弹出框标题中的链接），然后单击另一个以与第一个打开的节点半重叠 - 单击后面的一个，它将向前移动。单击现在后面的那个，没有任何反应：

jsfiddle.net/Sim1/YME9j/9

除了增加 z-index 以在不妨碍与背后的交互的情况下向前推进弹出框之外，还有其他方法吗？

Answer 1

您应该可以在 click 处理程序中执行此操作：

element.on("click", function() {
  d3.select(this).attr("z-index", d3.select(this).attr("z-index") + 1);
})

正如@AmeliaBR 指出的那样，如果您有多个弹出窗口，这将不会真正起作用，因为z-index 只会增加一。在这种情况下，您可以有一个全局变量来跟踪最大 z-index 并使用它。