CSS Modal Window Close Jumps to Page Top

JavaScript
1

First off … I’m primarily a designer, and not a programmer, so be gentle and use small words when providing help :slight_smile: …

I have a css modal window. When I click the link, a modal window opens. When I close the link, the window closes, and the page jumps all the way to the top of the page. I need the page to stay where it is when the modal window is closed.

After doing some searching, I know this is because of the anchor tag being called in the close link:

<a class="modal-close" href="#" onclick="modal_close('ModalVid');">&times;</a>

I posted the modal code on codepen… https://codepen.io/jabbamonkey/pen/JjPMmKv

WHAT I’VE TRIED
After some online searching, I saw recommendations to add the preventDefault() function OR “return false”. So, I tried to add it to the onclick close function … but neither worked. I may not be using the two correctly (my knowledge of javascript is pretty limited)

PREVENTDEFAULT()

function modal_close(id) {
     var ModalVideo = document.getElementById(id);
     ModalVideo.pause();
         preventDefault();
 }

RETURN FALSE

 function modal_close(id) {
     var ModalVideo = document.getElementById(id);
     ModalVideo.pause();
         return false
 }

Other recommendations said to try to add “overflow: hidden;” to the body, but I think that recommendation only works for jquery bootstrap modals.

Please help. Thanks…

2

Think I may have just figured it out. Pretty simple fix…

When I call an empty anchor (href="#"), then it jumps to the top of the page. But, when I call an id (href="#123") then it doesn’t jump … as long as there is no corresponding anchor tag in the page.

3

href=“javascript:void(0)” Would probably be better, in case some one puts id=“123” somewhere in the code down the line.