37

私はDjangoでブートストラップを使用しており、これまでのところすべてが機能しています。しかし、私はポップオーバー機能を使おうとしていますが、問題が発生し続けています。ポップオーバーをクリックするたびに、ページが一番上にスクロールして戻ります...しかし、ポップオーバーは表示されます。これが私のコードです：

//////////<..... a lot more HTML ....>//////////
<div class="bs-docs-example">
<a href="#" class="btn btn-large btn-danger" rel="popover" title="A Title" id="testpop" data-content="And here's some amazing content. It's very engaging. right?">Click to toggle popover</a>
</div>
{% endblock %}


{% block js %}
{{ block.super }}

{% bootstrap_javascript_tag "modal" %}
{% bootstrap_javascript_tag "alert" %}
{% bootstrap_javascript_tag "tooltip" %}
{% bootstrap_javascript_tag "popover" %}

<script type="text/javascript">
$("#testpop").popover();
</script>

どうもありがとう！

4

7 に答える 7

41

アンカー要素のデフォルトのアクションを防ぐことで、これを解決できます。

$('a#testpop').on('click', function(e) {e.preventDefault(); return true;});
于 2012-09-25T20:29:08.877 に答える
34

アンカータグにhref="javascript：//"を追加できます。

于 2013-08-23T09:37:46.367 に答える
30

href = "＃"タグを削除すると、機能するはずです。

于 2013-09-22T00:16:10.590 に答える
2

これは、ポップオーバー内に要素があることによっても発生する可能性がありますautofocus=on（クロムでテスト済み）

于 2012-11-14T17:25:24.970 に答える
1

href="#..."で置き換えることができますdata-target="#..."

于 2017-11-23T23:25:34.700 に答える
0

Bootstrap2.3.2を使用しています

ポイントはクリックではありません。プログラムでshowpopoverと呼んでも、一番上までスクロールします。

ポイントは、ブートストラップツールチップの表示機能です。そこに行があります：

$tip.detach().css({ top: 0, left: 0, display: 'block' })

チップを取り外すときに、高さと幅を取得するためだけにディスプレイブロックを適用します。これは形而上学的な質問です！見えない要素には高さがありません!! これを修正するために、その行にコメントを付けて追加しました。

$tip.show();

位置を取得する行の直後：

pos = this.getPosition()

それは私に働いた。

于 2014-08-26T18:24:58.763 に答える
0

Bootstrap v3.3.2でも同じ問題が発生し、アンカータグの代わりにボタンを使用して解決しました。

次に、 Bootstrapのドキュメントに戻って、 そこにあるポップオーバーの例の1つを除いてすべてがボタンを使用していることを発見しました。そして、驚いたことに、アンカーを使用するものはhref属性を省略しています。

于 2015-03-23T22:30:00.553 に答える