2

ブートストラップで静的ポップオーバーを作成しましたが、機能しません

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();
4

3 に答える 3

3

私は、何がうまくいかなかったのか分かります。ボタンの上にポップオーバーを作成すると、参照しているコードが生成されます。

編集できる作業ボタン Jsfiddle で JS fiddle を確認します

ブラウザ ブラウザでチェックインし、ボタンをテストする 生成された html のスクリーンショット

セクション 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>

たとえば、上記のコンテンツを popover に作成する場合は、次の手順を実行する必要があります。

<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"

于 2013-02-25T03:31:59.973 に答える
0

popover 関数は、コンテンツではなくボタンに適用する必要があります。

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

コンテンツ div をこのボタンに関連付けていないため、これで問題が完全に解決されるわけではありませんが、これが始まりです。

更新:OPが何をした後なのかをよりよく理解した後、初期化後にポップオーバーを表示するだけでそれを達成できると思います:

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

ただし、これは要素をポップオーバーのようにスタイル設定するだけの非常に遠回りな方法です。実際には CSS だけで行う必要があります。

于 2013-02-24T18:06:50.500 に答える