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');">×</a>
(see some of the code below)
WHAT I'VE TRIED
After some 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.
THE CODE
I posted the modal code on codepen... https://codepen.io/jabbamonkey/pen/JjPMmKv
HTML
<a href="#modal1" id="modalclick1" onclick="modal_open('ModalVid');">
Open Video Window
</a>
<div id="modal1" class="modal-overlay">
<div class="modal">
<a class="modal-close" href="#" onclick="modal_close('ModalVid');">×</a>
<div class="modal-content">
<video controls id="ModalVid" >
<source src="https://file-examples.com/wp-content/uploads/2017/04/file_example_MP4_1280_10MG.mp4" type="video/mp4">
</video>
</div>
</div>
</div>
CSS
.modal-overlay {
position: fixed; top: 0; bottom: 0; left: 0; right: 0;
background: rgba(0, 0, 0, 0.7); transition: opacity 500ms;
visibility: hidden; opacity: 0;
}
.modal-overlay:target {
visibility: visible; opacity: 1;
}
.modal {
margin: 70px auto; padding: 20px; background: #fff; width: 40%;
min-width:800px; position: relative; transition: all 5s ease-in-out;
}
.modal-close {
position: absolute; top: 10px; right: 30px;
transition: all 200ms; font-size: 30px;
font-weight: bold; text-decoration: none;
color: #fff; z-index:999999;
}
.modal-close:hover { color: #06D85F; }
.modal-content { max-height: 30%; overflow: auto; }
.modal-content video { width:100%; height:auto; }
JAVASCRIPT (doesn't affect the modal, but plays/stops the video onclick)
// Stop Video on Close
function modal_open(id) {
var ModalVideo = document.getElementById(id);
ModalVideo.play();
}
function modal_close(id) {
var ModalVideo = document.getElementById(id);
ModalVideo.pause();
}
There are no error messages ... just the issue with the page jumping to the top.
Well, the easiest fix is to get rid of the empty href (i.e. don't use href="#") and use an id tag (i.e. use href="#123"). This stopped the page from jumping (but be sure there is no anchor tag in the page with that same ID)