6

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

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 版本。如何在弹出窗口关闭之前打开链接？

谢谢！

4

8 回答 8

5

从标签内的目标中删除下划线..它将在 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>
于 2015-03-17T12:40:28.353 回答
5

我猜这个问题是因为你使用data-trigger="focus". 当您单击弹出框中的链接时，会触发“焦点”，然后弹出框关闭。此时无法执行点击链接事件。我通过单击弹出框后延迟隐藏弹出框解决了这个问题。

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

于 2017-02-17T08:16:40.253 回答
4

我对引导工具提示进行了一些尝试，一个快速而肮脏的解决方案是删除关闭模糊功能并在单击工具提示之外的任何元素时关闭它。

这是一个简单的示例：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');
    }
});

希望这可以帮助。

于 2015-03-16T08:30:12.443 回答
1

onclick在链接中添加：

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

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

于 2015-06-09T07:01:27.183 回答
0

在锚的目标中使用_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>
于 2015-03-17T14:16:03.823 回答
0

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

Example:

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

于 2015-03-17T06:30:32.927 回答
0

抱歉，无法为您的答案 matheusrufca 添加评论，但这对 IE9 及更低版本没有帮助。弹出框会消失，无论它是否来自相同的来源。

于 2015-03-11T10:25:02.147 回答
0

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

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

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

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

于 2015-03-10T16:55:07.997 回答