带有 html 内容的引导弹出窗口答案

【问题标题】：bootstrap popover with html content带有 html 内容的引导弹出窗口
【发布时间】：2015-06-05 22:42:08
【问题描述】：

我正在尝试将引导弹出框内容与 html 属性分开，就像您可以对其他组件做的那样，但我无法让它工作......

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>
<body>

  <div class="container">
    <h3>Popover Example</h3>
    <p>Popovers are not CSS-only plugins, and must therefore be initialized with jQuery: select the specified element and call the popover() method.</p>
    <div class="popover" >
      <a href="#" class="popover-toggle" title="Popover Header" >Toggle popover</a>
        <div class="popover-content">
          Here I am
        </div>
     </div>
  </div>

 <script>
   $(document).ready(function(){
     $('[data-toggle="popover"]').popover();  
   });
 </script>

 </body>
 </html>

【问题讨论】：

标签： twitter-bootstrap

【解决方案1】：

您有简单的锚点和一些不应显示的 div。

<a href="#" id="tglr" class="popover-toggle" title="Popover Header">Toggle popover</a>
<div id="customdiv" style="display: none">
    Here <b>I</b> am
</div>

在 JS 中，我们获取锚点（通过 id）并在其上安装 popover，有 2 个选项：第一个 'html' - 允许显示 html 而不是简单的文本，第二个指定从我们的 div 获得的内容：

$(document).ready(function(){
    $('#tglr').popover({
        html : true, 
        content: function() {
            return $('#customdiv').html();
        } 
    });  
 });

这是你的例子https://jsfiddle.net/DTcHh/8529/

您的代码的一个问题 - 您执行 $('[data-toggle="popover"]') 将选择数据切换等于“popover”的标签），但您没有这样的标签。如果你想以这种方式初始化弹出框，你应该像这样声明锚：

<a href="#" data-toggle="popover" class="popover-toggle" title="Popover Header">Toggle popover</a>

但在您的情况下，您只有一个带有一个自定义弹出框的链接，因此更合乎逻辑地通过 id 选择它。

【讨论】：

抱歉有任何拼写错误，但我的意思是，对于其他引导组件（例如下拉菜单），您可以通过将两个元素包装在一个 div 中来单独指定按钮的内容。我猜这不适用于弹出窗口？？？？
我明白你想要什么，但我不明白你为什么要包装它？这种方式有什么好处？您是否只想达到某种一致性并了解引导程序的逻辑？至于我在实践中这是不方便的方式。在许多情况下，即使是简单的 data-content 属性而不是 div 就足够了。
感谢理解！部分原因是可以理解的，但主要是因为我们正在使用 Opal 将 Ruby 与 React 集成。 React 不喜欢将 DOM 的一部分塞进这样的字符串中。可以做到，但会降低反应效率。