打开多个弹出窗口时,如何使选定的(单击的)自举弹出窗口向前移动?

问题描述:

我在D3中的svg元素上使用引导弹出窗口.可以在任何给定时间打开多个弹出窗口.我想知道的是,如何单击后面的弹出框,以迫使其移到前面,即专注于该弹出框?

I am using a bootstrap popover on svg elements in D3. Multiple popovers can be open at any given time. What I would like to know is how to, on clicking on a popover at the back, to force it to move to the front i.e. being focused on?

有没有办法增加单个弹出式窗口的z-index值以使其手动向前移动?

Is there any way to increment the z-index of an individual popover to move it forward manually?

谢谢.

我已经使用建议的答案设法创建了一个小提琴.出现的问题是,使用全局变量,它会在最向前的弹出窗口上正确地增加z-index,但是将第一个弹出窗口置于最前面之后,我无法访问其他窗口,即什至单击后面的...也是如此.点击处理程序甚至没有被调用.我在想正在进行某种类型的分层.例如:如果您查看子节点并单击一个节点(弹出窗口标题中的链接),然后单击另一个节点将第一个打开的节点半重叠-单击后面的一个节点,它将向前移动.点击后面的那个,什么也没发生:

I have managed to create a fiddle using the suggested answer. The problem arises that, with using the global variable, it increments the z-index correctly on the most forward popover, but after bringing one to the front I am not able to access the others i.e. to even click the ones behind...so the click handler is not even being called. I'm thinking there is some type of layering going on. For example: If you look at the children nodes and click on one (the link in the title of the popover), then click on another one to semi-overlap the first open one - click the one behind and it will move forward. Click the one that is now behind and nothing happens:

jsfiddle.net/Sim1/YME9j/9

jsfiddle.net/Sim1/YME9j/9

除了增加z-index值以使弹出框向前移动而不妨碍与后面的弹出窗口的交互之外,还有其他选择吗?

Is there an alternative to incrementing the z-index to bring a popover forward without hampering interaction with those that are behind it?

您应该能够在click处理程序中做到这一点:

You should be able to do this in a click handler:

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

正如@AmeliaBR所指出的那样,如果您拥有多个弹出框,那么这将不会真正起作用,尽管z-index仅增加了一个.在这种情况下,您可以使用一个全局变量来跟踪最大的z-index并使用它.

As @AmeliaBR pointed out, this won't really work if you have more than one popover though as the z-index is only incremented by one. In a case like this, you could have a global variable that keeps track of the maximum z-index and use that.