javascript - 为什么我的引导弹出窗口不显示？

Question

我在引导程序中创建了一个静态弹出窗口，但它不起作用

一些html代码：

<div class="container row-fluid" >
<div class="span8 offset2">
    <div class="hero-unit">
        <h1 class="hidden-phone">Heading</h1>
        <div class="row-fluid">
            <div class="span5" style="margin-top:30px;">
                <div class="popover left" id="welcome">
                    <div class="arrow"></div>
                    <h3 class="popover-title">To ALL:</h3>
                    <div class="popover-content">
                        <p>count and</p>                
                        <p>。。。&lt;/p>  
                    </div>
                </div>
            </div>
            <div class="span6">
                <img src="img/welcome/1.jpg" class="img-circle img-polaroid pull-right hidden-phone" />
            </div>
        </div>
        <a class="btn btn-primary btn-large" href="#">TEST NOW!</a>
    </div>
</div>

我所有的js代码：

$('#welcome').popover();

Answer 1

我正在给出一个示例代码。

html:

<span class="giverscore_tooltip">Example</span>

JS：

jQuery(document).ready(function() {
     $('.giverscore_tooltip').popover({
        trigger:'hover',
        content:'write a review, create a keyword, invite a friend, and more.',
        placement:'top'
    });
 });

Answer 2

我可以看到，出了什么问题。您所指的代码是在您在按钮上创建弹出框时生成的。

使用可以编辑的工作按钮 Jsfiddle 检查 JS fiddle

签入浏览器浏览器并测试按钮

第 1 节：

<div class="popover left" ">
                <div class="arrow"></div>
                <h3 class="popover-title">To ALL:</h3>
                <div class="popover-content">
                    <p>count and</p>                
                    <p>。。。&lt;/p>  
                </div>
              </div>

因此，例如，您想在弹出窗口中创建上述内容，您必须执行以下操作：

<a id="pop" title="" data-content="<p>Content and</p><p> Vivamus sagittis lacus vel augue laoreet rutrum faucibus.</p>" data-placement="left" data-toggle="popover" class="btn" href="#" data-original-title="Popover on left" data-html="true">Try me</a>

因此，当您单击此按钮时，第 1 节中的上述代码将生成 . 还要记住如果你想使用 html 内容集data-html="true"

Answer 3

您必须将弹出框功能应用于按钮，而不是内容。

$('.btn').popover();

这仍然不能完全解决问题，因为您还没有将您的内容 div 与此按钮相关联，但这是一个开始。

更新：在更好地了解了 OP 之后，我认为它可以通过在初始化后显示弹出框来完成：

$(div#welcome').popover();
$('div#welcome').show();

然而，这是一种非常迂回的方式，只不过是对像弹出框这样的元素进行样式设置。它真的应该单独使用 CSS 来完成。