关闭一个模态window，页面跳到顶部（不要）

Question

我有一个 css 模态 window。当我单击 link 时，模式 window 打开。当我关闭 link 时，window 也会关闭，页面会一直跳到页面顶部。当模式 window 关闭时，我需要页面保持原样。

经过一番搜索，我知道这是因为在结束时调用了锚标记 link:

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

（见下面的部分代码）

我尝试了什么
经过一些搜索，我看到了添加 preventDefault() 函数或 "return false" 的建议。所以，我试图将它添加到 onclick 关闭函数中……但都没有用。我可能没有正确使用这两个（我对 javascript 的了解非常有限）

防止默认()

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

RETURN 错误

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

其他建议说尝试将 "overflow: hidden;" 添加到主体中，但我认为该建议仅适用于 jquery bootstrap 模态。

代码

我在 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（不影响模态，但plays/stops点击视频）

// 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();
}

没有错误消息...只是页面跳到顶部的问题。

Answer 1

嗯，最简单的解决方法是去掉空的 href（即不要使用 href="#"）并使用 id 标签（即使用 href="#123"）。这阻止了页面跳转（但要确保页面中没有具有相同 ID 的锚标记）

Answer 2

为什么不从 javascript 打开和关闭模式？在这种情况下，从 'a' 标签中删除 href。

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

打开模态时-

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

关闭模态时-

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

您还可以修改代码使模态参考动态化。更新笔- https://codepen.io/ashecret/pen/pozQWpp

关闭一个模态window，页面跳到顶部（不要）

Close a modal window, and the page jumps to the top (not wanted)

anchor

popup

modal-window