Question

我有一个带有焦点触发器的弹出窗口和弹出框中的链接。

HTML

<div class="tree">
    <div class="html-popup">
        Popup text <a href="http://www.google.com" target="_top">Link somewhere</a>
    </div>
    <a tabindex="0" role="button" data-container="body" data-toggle="popover" data-trigger="focus" data-placement="bottom">
        Text that has a popover
    </a>
</div>

JavaScript的：

$('.tree [data-toggle="popover"  ]').popover({
    html: true,
    content: function () {
        return $(this).prev().html();
    }
});

以下是实时示例：JSFiddle

在Chrome中，链接会在弹出窗口关闭之前打开，但在IE和Firefox中它只会关闭弹出窗口。

我必须支持IE9和合理的新版Firefox。如何在弹出窗口关闭之前打开链接？

谢谢！

Answer 1

从目标内部标记中删除下划线。它将在IE中正常工作

    <div class="tree">
    <div class="html-popup"> Popup text <a href="http://www.google.com"   target="top">Link somewhere</a>
    </div>
<a tabindex="0" role="button" data-container="body" data-toggle="popover" data-trigger="focus" data-placement="bottom">
Text that has a popover</a>
</div>

Answer 2

我在bootstrap工具提示中玩了一下，一个快速而肮脏的解决方案是删除关闭模糊功能，并在工具提示外单击任何元素时将其关闭。

以下是一个简单示例：https://jsfiddle.net/b8hjg5x9/。

$('.tree [data-toggle="popover"]').popover({
    html: true,
    content: function () {
        return $(".html-popup").html();
    }
}).on('show.bs.popover', function() {
    $('[data-toggle="popover"]').popover('hide');
});

$('html').on('click', function (e) {
    if ($(e.target).data('toggle') !== 'popover') { 
        $('[data-toggle="popover"]').popover('hide');
    }
});

希望这有帮助。

Answer 3

在链接中添加onclick：

<a href="#" onclick="window.open('http://www.google.com/');\"> link </a>

为我工作。但它不会用回车键触发。

Answer 4

您是否仅在jsfiddle中尝试了此代码？

如果是这样，就会发生这种情况，因为这种虚拟环境使用iframe，大多数浏览器出于安全原因不允许重定向。删除'target'属性，您将收到以下控制台错误：

X-Frame-Options拒绝加载：https://www.google.com.br/没有允许跨域框架。

如果您在iframe中工作，一个好的选择是更改为target="_blank"，否则它应该有效。

Answer 5

抱歉，无法在您的答案matheusrufca中添加评论，但这对IE9及更低版本没有帮助。无论是否有相同的起源，popover都会消失。

Answer 6

回答BebliucGeorge。这适用于简单的情况，但对于2个或更多工具提示，它引入了一个新的错误 - 如果我点击另一个切换，popover将不会关闭。

Example:

https://jsfiddle.net/vc7zn1o6/29/

Answer 7

在锚点目标中使用_blank代替_top。然后您的代码应如下所示：

    <div class="tree">
       <div class="html-popup">
          Popup text <a href="http://www.google.com" target="_blank">Link somewhere</a>
      </div>
      <a tabindex="0" role="button" data-container="body" data-toggle="popover" data-trigger="focus" data-placement="bottom">
         Text that has a popover
      </a>
   </div>

Answer 8

我想这个问题是因为你使用了data-trigger="focus"。当你点击popover中的链接时，＆＃39;焦点＆＃39;被触发，然后popover关闭。此时，点击链接事件无法执行。我在点击弹出窗口后通过延迟隐藏弹出窗口解决了这个问题。

实施例： $('[data-toggle=popover]').popover({ delay: { hide: 200 } });

Bootstrap popover中的链接不起作用

8 个答案: