Bootstrap 静态弹出框答案

【问题标题】：Bootstrap static popoverBootstrap 静态弹出框
【发布时间】：2016-07-21 08:06:24
【问题描述】：

在引导弹出框文档 (http://getbootstrap.com/javascript/#popovers) 中，它们在页面上显示弹出框以静态方式显示（在它连接到按钮的示例之前）。

我想在我的页面上显示一个弹出框作为对我网站上某些内容的解释 - 但希望它始终显示，而无需用户单击任何内容。

我怎样才能像他们一样显示静态弹出框？找不到选项。

谢谢

【问题讨论】：

从 HTML 中删除 fade 类？ <div class="popover right">

标签： css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

如果您检查 Bootstrap 在他们的示例中使用的 HTML，他们只是从 HTML 元素中删除了 fade 类，然后覆盖了一些默认样式。

HTML

<div class="popover-example"> <!-- NEW -->
  <div class="popover top">
    <div class="arrow"></div>
    <h3 class="popover-title">Popover top</h3>
    <div class="popover-content">
      <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
    </div>
  </div>
</div>

CSS

.popover-example .popover {
  position: relative;
  display: block;
  margin: 20px;
}

DEMO

【讨论】：

【解决方案2】：

试试这个：

$('your_selector').popover('show');

【讨论】：

【解决方案3】：

找到了一个相当简单的解决方案（不确定它是否是最好的 - 但它可以完成工作）。

在我的 popover html 中，我添加了一个名为 .static-popover 的类：

<div class="popover left static-popover" id="testPopover">
    <div class="arrow"></div>
    <h3 class="popover-title">Popover left</h3>
    <div class="popover-content">
        <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
    </div>
</div>

css 类：

.static-popover { display: block !important; }

由于弹出框 div 的起始位置位于顶部：0 和左侧：0，就我而言，我已经为“testPopover”创建了一个 css 定义，并根据我的需要使用了合适的顶部和左侧。

【讨论】：

【解决方案4】：

我喜欢添加 static-popover 类的想法。考虑到这一点，只需添加一个 JS 函数即可。

$('.static-popover').show().css('position','relative');

【讨论】：

【解决方案5】：

稍微不同的方法是在页面加载时以编程方式显示它。并禁用弹出框的隐藏事件（'hide.bs.popover'）。假设我有一个表单 (id=myForm)，我希望与它关联一个弹出框。我希望弹出框始终显示。假设您使用的是 jquery，您可以执行以下操作：

$("#myForm").popover();
$("#myForm").popover("show");

$('#myForm').on('hide.bs.popover', function () { return false;});

【讨论】：