twitter-bootstrap – 是否可以使用div作为Twitter的Popover的内

发布时间：2020-12-17 23:17:53 所属栏目：安全来源：网络整理

导读：我使用twitter的bootstrap的popover here.现在，当我滚动popover文本时，popover只显示从 a的data-content属性的文本。我想知道如果有反正把一个 div里面的popover。潜在的，我想使用php和mysql在那里，但如果我可以得到一个div工作，我想我可以找出其余的。

我使用twitter的bootstrap的popover here.现在，当我滚动popover文本时，popover只显示从< a>的data-content属性的文本。我想知道如果有反正把一个< div>里面的popover。潜在的，我想使用php和mysql在那里，但如果我可以得到一个div工作，我想我可以找出其余的。我试着将数据内容设置为一个div ID，但它没有工作。

HTML：

<a class='danger' 
   data-placement='above' 
   rel='popover' 
   data-content='#PopupDiv' 
   href='#'>Click</a>

解决方法

首先，如果你想在内部使用HTML，你需要将HTML选项设置为true：

$('.danger').popover({ html : true});

然后，您有两个选项来设置Popover的内容

>使用data-content属性。这是默认选项。
>使用返回HTML内容的自定义JS函数。

使用数据内容：
您需要转义HTML内容，如下所示：

<a class='danger' data-placement='above' 
   data-content="&lt;div&gt;This is your div content&lt;/div&gt;" 
   title="Title" href='#'>Click</a>

您可以手动转义HTML或使用函数。我不知道PHP，但在Rails我们使用* html_safe *。

使用JS函数：
如果你这样做，你有几个选择。最简单的我认为是把你的div内容隐藏在任何你想要的，然后写一个函数传递其内容popover。这样的东西：

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

然后你的HTML看起来像这样：

<a class='danger' data-placement='above' title="Popover Title" href='#'>Click</a>
<div id="popover_content_wrapper" style="display: none">
  <div>This is your div content</div>
</div>

希望它帮助！

PS：我使用popover时遇到了一些麻烦，没有设置标题属性…所以，记住总是设置标题。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!