Question

我正在使用Django的bootstrap，到目前为止一切正常。但是，我试图使用弹出功能，我一直遇到问题。每当点击我的弹出窗口时，页面会滚动回到顶部...但是弹出窗口会出现。这是我的代码：

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

非常感谢！

Answer 1

您可以通过阻止锚元素的默认操作来解决这个问题：

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

Answer 2

删除 href =“＃”标记，它应该有用。

Answer 3

您可以将href =“javascript：//”添加到锚标记。

Answer 4

这也可能是因为弹出框中包含autofocus=on的元素（在chrome中测试）

Answer 5

我正在使用Bootstrap 2.3.2

重点不在于点击。即使我以编程方式调用show popover，它也会将我滚动到顶部。

关键在于bootstrap tooltip show function。那里有一条线：

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

在拆卸尖端时仅应用显示块以获得其高度和宽度。这是一个形而上学的问题！隐形元素没有高度!!为了解决这个问题，我对该行进行了评论并添加了：

$tip.show();

就在获得职位的行之后：

pos = this.getPosition()

对我有用。

Answer 6

我在Bootstrap v3.3.2中遇到了同样的问题，并通过使用按钮而不是锚标签来解决它。

然后我回到Bootstrap docs并发现除了其中一个弹出的例子之外的所有例子都使用了按钮 - 而且惊喜 - 那个使用锚点的例子会留下href属性！

Answer 7

您可以将href="#..."替换为data-target="#..."

单击弹出窗口滚动到页面顶部[Bootstrap和Django]

7 个答案: