style.display = 'none' 模态上的点击事件跳转到页面顶部

Question

我有一个显示在我页面上的点击事件上的模式。我在modal右上角的'close'链接元素中添加了一个事件监听器，代码如下：

document.querySelector('.modal__close').addEventListener('click', () => {
            modal.style.display = 'none'
        })

这确实关闭/删除了模式，但是，它也会导致页面“跳转”回顶部（我注意到它还在 url 的末尾添加了一个“#”），即不是我想要的行为，我怎样才能让模式优雅地消失并让底层显示完全一样？

Answer 1

可能该元素是一个链接，因此您应该阻止其默认操作（即跟随href 属性中定义的链接）

document.querySelector('.modal__close').addEventListener('click', (ev) => {
      modal.style.display = 'none';
      ev.preventDefault();
})

作为旁注，您可以改用 <button> 元素，这可能更适合此用例。

Answer 2

我认为你有这样的事情：

<a href="" class="modal__close"></a>

默认情况下，如果链接 (a) 没有定义 href，它会重新加载当前页面（并添加 #）。

要跳过它，您可以使用 event 参数阻止 Javascript 中的默认操作：

document.querySelector('.modal__close').addEventListener('click', (ev) => {
     ev.preventDefault();
     modal.style.display = 'none';
});

在 jQuery 中会更容易：

$('.modal__close').click(function(ev){
    ev.preventDefault();
    $(modal).css('display', 'none'); // can also be $(modal).hide();
});