Question

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

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

我怎样才能像他们一样展示静态弹出窗口？找不到一个选择。

谢谢

Answer 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

Answer 2

试试这个：

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

Answer 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; }

因为popover的起始位置在顶部：0和left：0，在我的情况下，我已经为“testPopover”创建了一个css定义，其中包含相应的top＆amp;留给我的需要。

Answer 4

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

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

Answer 5

稍微不同的方法是以编程方式在页面加载时显示它。并禁用弹出框的隐藏事件（＆＃39; hide.bs.popover＆＃39;）。说我有一个表格（id = myForm），我想要一个popover关联。而且我希望popover始终显示出来。假设您正在使用jquery，您可以执行以下操作：

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

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

Bootstrap静态弹出窗口

5 个答案: