关闭模态框会重新加载页面

Question

好的，我的网站上有一个奇怪的问题，我可能很难解释。我正在一个只有一页（index.html）且没有滚动的网站上工作。我在左侧有一个导航栏，里面有一些菜单项。因此，当单击菜单项时，会出现一个包含内容的框。由于它是一个单页无滚动网站，因此我使用 ID 来调用这些框。请看下面的代码：

<div class="nav-content">
    <ul>
        <li><a href="#home" class="active">Home</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#gallery">Gallery</a></li>
        <li><a href="#contact">Contact</a></li>
    </ul>
</div>

当点击菜单项时，屏幕上会出现这种部分。

<section class="content show background-overlay" id="about">
    <div class="aboutUs">
        <h1>About Us</h1>
        <div class="overflow-scroll">
            Lorem ipsumasfasfasfasfafafsafs         
        </div>
    </div>
</section>

点击链接后浏览器地址栏显示如下： file:///C:/Users/zak/Desktop/web/project1/index.html#home 要么 file:///C:/Users/zak/Desktop/web/project1/index.html#gallery

现在我在图库内容部分使用了一个模态框，关闭模态框后，页面不会停留在图库内容部分，而是重新加载。

例如：

模态框在这里： file:///C:/Users/zak/Desktop/web/project1/index.html#gallery

模态关闭后： file:///C:/Users/zak/Desktop/web/project1/index.html（即首页内容部分）

即使我关闭了模式，我也希望图库部分保持打开状态。

对于模态，我没有使用任何 JS 或 jQuery。它是纯 HTML 和 CSS。为了摆脱这个问题，我尝试了一个简单的 jquery 代码：

$('#modal_close').click(function(e) {
    e.preventDefault();
    return false;
});

这段代码只是停止一切工作。

谁能告诉我在模态框关闭后如何阻止页面重新加载？

Answer 1

您可以尝试使用隐藏事件进行刷新。

$('#modal_close').on('hide', function() {
  window.location.reload();
});