Bootstrap Popover - 如何在文本弹出窗口中添加链接？

Posted 2023-02-24

【中文标题】Bootstrap Popover - 如何在文本弹出窗口中添加链接？

【英文标题】：Bootstrap Popover - how add link in text popover?

【发布时间】：2013-12-16 10:42:42

【问题描述】：

我使用 bootstrap 3 弹出框。

现在我想要文本 popvover 上的链接。

代码：

<a href="#" 
  role="button" 
  class="btn popovers" 
  data-toggle="popover" 
  title="" 
  data-content="test content <a href="" title="test add link">link on content</a>" 
  data-original-title="test title"
  >
  test link
</a>

但是当我在 html 中启动代码时，我看到：

<a href="#" role="button" class="btn popovers" data-toggle="popover" title="" data-content="test content &lt;a href=" "="">link on content</a>
" 
data-original-title="test title"
&gt;
test link

我知道符号 " 中的问题，但我不知道在链接中添加链接...

请告诉我如何正确的代码？

P.S.：如果问题已经存在，请给我链接。

【参考方案1】：

在初始化弹出框时，您需要传递值为 true 的 html 选项，如下所示。

Demo

JS：

$("[data-toggle=popover]")
.popover(html:true)

HTML：

<a href="#" role="button" class="btn popovers" data-toggle="popover" title="" data-content="test content <a href='' title='test add link'>link on content</a>" data-original-title="test title" target="_blank">test link</a>

【讨论】：

这有效，但不能与“下次点击时关闭”（=attribute data-trigger="focus"）结合使用。

单引号 (') 在数据内容中重要吗？

是的，我想是的。

我为下面的“下次点击关闭”案例提供了解决方法。

【参考方案2】：

只需使用属性 data-html="true"。

<button
  data-toggle="popover"
  data-content="Link: <a href='xyz.com'>XYZ</a>"
  data-html="true">
  CLICK
</button>

【讨论】：

如何在 href 部分添加指向

【参考方案3】：

我使用了data-trigger="focus"，但在弹出框内容中的链接存在问题。如果在链接上单击鼠标按钮并按住一段时间，则弹出框消失并且链接“不起作用”。一些客户对此提出了抱怨。

HTML

<a href="#" role="button" class="btn popovers" data-toggle="popover" data-trigger="focus" title="" data-content="test content <a href='/' title='test add link'>link on content</a>" data-original-title="test title">test link</a>

JS

$("[data-toggle=popover]").popover(html:true)

您可以重现问题here。

我使用以下code 解决了这个问题：

data-trigger="manual" 在 html 和

$("[data-toggle=popover]")
.popover( html: true)
    .on("focus", function () 
        $(this).popover("show");
    ).on("focusout", function () 
        var _this = this;
        if (!$(".popover:hover").length) 
            $(this).popover("hide");
        
        else 
            $('.popover').mouseleave(function() 
                $(_this).popover("hide");
                $(this).off('mouseleave');
            );
        
    );

【讨论】：

你用这个救了我！谢谢！

【参考方案4】：

如果您想在弹出窗口中使用焦点和链接，您需要防止弹出窗口在点击内部时关闭。我找到的最干净的解决方案是 preventDefault 在具有 .popover 类的弹出窗口内点击

$('body')
  .on('mousedown', '.popover', function(e) 
    e.preventDefault()
  );
);

【讨论】：

您也可以简单地为弹出框添加一个短暂的延迟。见***.com/a/31497464/1376661

【参考方案5】：

<a href="#" class="btn popovers" data-toggle="popover" title="" data-content="test content <a href='' title='test add link'>link on content</a>" data-html="true"><i class="glyphicon glyphicon-info-sign"></i></a>

只需添加 data-html="true" 即可使用链接属性:)

【参考方案6】：

值得注意的是，虽然给出的答案是正确的 - 当应用 data-trigger="focus" 时，链接会导致问题。正如我发现从客户端如果在弹出窗口上快速点击链接将被操作，如果用户按住他们的鼠标按钮，那么不幸的是触发器启动并发生弹出窗口。因此，简而言之，请考虑是否需要链接并计划点击次数。

【参考方案7】：

$("body").on("mousedown",".my-popover-content a",function(e)
    document.location = e.target.href;
);

为我做：基本上，把事情掌握在你自己手中。同样，这是使用弹出选项html: true、sanitize: false 和trigger : "focus"