关闭模式窗口，页面跳到顶部（不需要）

Question

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>

(see some of the code below)

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.

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');">&times;</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.

Answer 1

Well, the easiest fix is to get rid of the empty href (ie don't use href="#") and use an id tag (ie use href="#123"). This stopped the page from jumping (but be sure there is no anchor tag in the page with that same ID)

Answer 2

Why don't you open and close the modal from javascript? In this case, remove href from the 'a' tag.

const modal = document.getElementById("modal1");

When opening modal-

modal.style.visibility = "visible";
modal.style.opacity = 1;

When closing modal-

modal.style.visibility = "hidden";
modal.style.opacity = 0;

You can also modify the code to make modal reference dynamic. Updated pen- https://codepen.io/ashecret/pen/pozQWpp