-1

I am using an html5-css3 template with a modal popup gallery which jumps to the top of the site when I click on any image. It is because of the hashtag and I have no idea how to get it work properly. Please help! I am new to coding and I searched for an answer for days now but didn't find a solution.

here is how the html code looks like:

<a href="#" data-reveal-id="#modal-01"><img src="images/portfolio/canandreu.jpg" alt=""/></a>
Mohammed Wahed Khan
  • 836
  • 2
  • 14
  • 35
Slevin K
  • 5
  • 4

3 Answers3

1

You can use 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>
Bhuwan
  • 16,525
  • 5
  • 34
  • 57
0

you can use or

but i suggest use user onclick="return false;" this will fix your problem

user3048405
  • 27
  • 1
  • actually now I tried again and it also prevents the jump but blocks the popup as the JavaScript:Void(0) thx anyways – Slevin K Dec 01 '17 at 09:09
0

If you add a class like modal-link to each of the a tags, then you can use some code like this:

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

This will prevent each of the elements with the class modal-link from jumping you to the top of the page.