it-swarm.com.de

Wenn Sie auf ein Popover klicken, blättern Sie zurück zum Seitenanfang [Bootstrap and Django]

Ich benutze Bootstrap mit Django und bisher hat alles geklappt. Ich versuche jedoch, die Popover-Funktion zu verwenden, und ich stelle immer wieder ein Problem fest. Bei jedem Klick auf mein Popover wird die Seite nach oben zurückblättern ... hier ist mein code:

//////////<..... 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>

Danke vielmals!

31
abisson

Sie können das beheben, indem Sie die Standardaktion des Ankerelements verhindern:

$('a#testpop').on('click', function(e) {e.preventDefault(); return true;});
39
dokkaebi

Entfernen Sie das href = "#" - Tag, es sollte funktionieren.

Sie können dem Ankertag href = "javascript: //" hinzufügen.

22
Florin Dobre

Dies kann auch durch ein Element mit autofocus=on im Popover verursacht werden (getestet in Chrom).

2
Peter Ehrlich

Sie können href="#..." durch data-target="#..." ersetzen.

0

Mit Bootstrap v3.3.2 bin ich auf das gleiche Problem gestoßen und habe es gelöst, indem ich Knöpfe anstelle von Ankertags verwendete. 

Ich ging dann zurück zu Bootstrap docs und fand heraus, dass alle bis auf eines der Popover-Beispiele, die dort gegeben wurden, Knöpfe verwenden - und Überraschung - derjenige, der den Anker verwendet, lässt das href-Attribut aus!

0
Ahmer Kureishi

Ich benutze Bootstrap 2.3.2

Es geht nicht darum, zu klicken. Auch wenn ich show popover programmatisch aufrufe, scrollt es mich nach oben.

Der Punkt ist auf bootstrap tooltip show function. Es gibt eine Linie dort:

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

Es wendet den Anzeigeblock beim Abnehmen der Spitze nur an, um seine Höhe und Breite zu erhalten. Dies ist eine metaphysische Frage! Unsichtbare Elemente haben keine Höhe !! Um dies zu beheben, habe ich diese Zeile kommentiert und hinzugefügt:

$tip.show();

Direkt nach der Zeile, wo es eine Position bekommt:

pos = this.getPosition()

Es hat bei mir funktioniert.