在视频的上方显示模态框

要在视频的上方显示模态框，你可以使用HTML、CSS和JavaScript来实现。以下是一个示例代码：

HTML部分：

<div class="video-container">
  <video src="video.mp4" controls></video>
  <div id="modal" class="modal">
    <div class="modal-content">
      <span class="close">&times;</span>
      <p>这是一个模态框</p>
    </div>
  </div>
</div>

CSS部分：

.video-container {
  position: relative;
}

.modal {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1;
}

.modal-content {
  background-color: #fff;
  width: 300px;
  padding: 20px;
  margin: 100px auto;
}

.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

JavaScript部分：

// 获取模态框和关闭按钮
var modal = document.getElementById("modal");
var closeBtn = document.getElementsByClassName("close")[0];

// 点击视频时显示模态框
document.querySelector(".video-container video").addEventListener("click", function() {
  modal.style.display = "block";
});

// 点击关闭按钮时隐藏模态框
closeBtn.addEventListener("click", function() {
  modal.style.display = "none";
});

// 点击模态框外部时隐藏模态框
window.addEventListener("click", function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
});

这个示例中，首先使用HTML创建了一个包含视频和模态框的容器。然后使用CSS样式设置了视频容器的位置和模态框的样式。最后，使用JavaScript实现了点击视频时显示模态框，点击关闭按钮或模态框外部时隐藏模态框的功能。