href hashtag # 使模态弹出画廊点击跳转到网站顶部

Question

我使用的是 html5-css3 模板，带有模态弹出画廊，当我单击任何图像时它会跳转到网站顶部。这是因为主题标签，我不知道如何让它正常工作。请帮忙！我是编码新手，我搜索了好几天的答案，但没有找到解决方案。

这里是 html 代码的样子：

<a href="#" data-reveal-id="#modal-01"><img src="images/portfolio/canandreu.jpg" alt=""/></a>

Answer 1

你可以使用要么

但我建议使用用户 onclick="return false;" 这将解决您的问题

Answer 2

如果您向每个 a 标签添加一个 class，例如 modal-link，那么您可以使用如下代码：

var modalLinks = document.querySelectorAll('.modal-link');
Array.prototype.forEach.call(modalLinks, function(el, i){
  el.addEventListener('click', function(e){
    e.preventDefault();
  });
});

这将防止带有 class modal-link 的每个元素将您跳转到页面顶部。

Answer 3

您可以使用 href="JavaScript:Void(0);"

By using JavaScript:Void(0), you can eliminate the unwanted side-effect, because it will return the undefined primitive value.

<a href="JavaScript:Void(0)" data-reveal-id="#modal-01"><img src="images/portfolio/canandreu.jpg" alt=""/></a>

href hashtag # 使模态弹出画廊点击跳转到网站顶部

href hashtag # makes modal popup gallery on click to jump on the top of the site

html

css

image-gallery

modalpopup