jquery - 单击弹出框会滚动回页面顶部 [Bootstrap 和 Django]

Question

我正在使用带有 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>

非常感谢！

score 41 · Accepted Answer

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

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

score 34 · Accepted Answer

34

您可以将 href="javascript://" 添加到锚标记。

于 2013-08-23T09:37:46.367 回答

score 30 · Accepted Answer

30

删除href="#"标签，它应该可以工作。

于 2013-09-22T00:16:10.590 回答

score 2 · Accepted Answer

2

这也可能是由于autofocus=on在弹出框内有一个元素（在 chrome 中测试）

于 2012-11-14T17:25:24.970 回答

score 1 · Accepted Answer

1

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

于 2017-11-23T23:25:34.700 回答

score 0 · Accepted Answer

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

然后我回到Bootstrap 文档，发现除了其中一个弹出框示例之外，所有示例都使用按钮 - 令人惊讶的是 - 确实使用锚点的示例忽略了 href 属性！

score 0 · Accepted Answer

我正在使用 Bootstrap 2.3.2

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

重点在于引导工具提示显示功能。那里有一行：

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

它在分离提示时应用显示块只是为了获得它的高度和宽度。这是一个形而上学的问题！隐形元素没有高度！！为了解决这个问题，我评论了该行并添加了：

$tip.show();

就在它获得位置的行之后：

pos = this.getPosition()

它对我有用。

jquery - 单击弹出框会滚动回页面顶部 [Bootstrap 和 Django]

7 回答 7

Related

Reference