引导模式重新加载页面

Question

顶部的汉堡图标。我已经为菜单使用了引导模式。..

当你点击汉堡图标时，它会打开带有链接的模型。该模式包含关闭按钮（x）。当您单击关闭按钮时，它会重定向到网站顶部。

当您现在单击模态上的链接时，它会重新加载整个页面，然后重定向到该特定链接。

我的问题是：当您单击该链接时，它应该重定向到部分链接而无需重新加载。

解决此任务的困难：

1. 当您在该链接上触发关闭按钮等相同事件时，它将重定向到网站顶部。

2. 如果您通过 css 手动关闭弹出窗口，则单击该链接时，整个站点将进入背景模式（淡入）。如果您手动删除该背景模式，则滚动条将不起作用。

该网站中的当前代码：

当点击链接时，该部门的 id 将被传递给函数，然后手动删除弹出模式，然后重新加载整个页面，然后重定向到该特定 ID。

我的问题。 : 我不想重新加载页面。

Answer 1

我认为这就是你想要的：

<script>
    $(document)
        .ready(function () {
            $('#btnGoTo')
                .click(function () {
                    $('#loginModal').modal('toggle');
                });
        });
</script>

<button class="btn btn-success" data-target="#loginModal" data-toggle="modal">Open modal</button>

<div class="modal fade" id="loginModal" tabindex="-1">
    <a id="btnGoTo" class="btn btn-success" href="#goTo">Klick me</a>
</div>

<div id="goTo">
    go to text
</div>

当您单击模式中的链接时，模式会关闭，并且浏览器会转到 id 为“goTo”的 div，而无需重新加载页面。 对于模态样式，您可以使用 modal-dialog、modal-content 和 modal-header 引导类