Bootstrap 3弹出框隐藏内容仍可点击

Question

3

这是我的代码： http://codepen.io/murdocgrjey/pen/LFuto 我试图在内容区域和按钮外单击关闭弹出窗口，但出现了一个问题。显然，我无法完全隐藏或销毁内容。

当我使用“触发”链接切换弹出窗口时，它工作正常。但是，无论何时我通过在内容外单击来关闭它，我仍然可以悬停在内容中的链接上。

请问有解决方法吗？

- greywind

4个回答

1

这是我为了防止隐藏的弹出框内元素被点击所做的操作。

$('button.new-history').on('hidden.bs.popover', function () {
    $(this).next().remove();
})

当弹出框被隐藏时，应将其从DOM中移除。希望这能帮到你！

- Salman Hasrat Khan

1

这是一个可工作示例的链接：http://codepen.io/anon/pen/zhIsm。我只保留了最新的触发器并在每次文档被点击时点击它。

- Yaroslav Yakovlev

1

有一个小问题。当你触发其中一个弹出框并将其隐藏后，下一次在文档中单击任何位置时，它会重新打开上次隐藏的弹出框。 - JofryHS

1

以下是另一种方法（也适用于data-api）http://jsbin.com/aRiZiki/1/edit

- Manoharan

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- JofryHS · Accepted Answer

3

我认为你太过于操纵内部机制了。

这是工作示例：http://codepen.io/anon/pen/utbin 如果目标不是触发器，只需切换现有的打开弹出窗口即可。

- JofryHS

1

谢谢，伙计。它可以工作了，但是你能否让它像一个弹出窗口一样，当你点击另一个“触发器”时，关闭已打开的弹出窗口并显示所点击的弹出窗口吗？目前它们重叠在一起。 - greywind

1

@ greywind，那么您需要手动注册“click”事件以检查现有的打开弹出窗口。我相信Yaroslaw的答案已经涵盖了这一点。 :) - JofryHS