应用错误收集

如何使用全屏视频顶部的关闭按钮制作弹出窗口

时间：2018-09-06 13:01:22

标签： javascript css html5

我创建了一个小示例项目，在其中播放视频，并在每个给定的时间间隔内显示一个弹出框，其中带有关闭按钮，同时暂停视频。单击关闭按钮后，视频将继续播放。我一直面临的问题是，在全屏播放视频时，会显示弹出窗口（我将最大z索引值用于弹出部分），但是关闭按钮不起作用。

var det = true;
var i = 1;
var popInterval = 2;
var cl;
var j = popInterval;
var vid = document.getElementById("video");
var wrapper = document.getElementById("wrp");

function check()
{
    if(vid.currentTime > 0)
    {
        //clearInterval(cl);
        startPop();
    }
}
cl = setInterval(check, 1);

function startPop()
{
    if(vid.currentTime == j || (vid.currentTime > j && vid.currentTime < j+0.1))
    {
        vid.pause();
        wrapper.style.display = "block";
        ++i;
        j = popInterval * i;
    }
    var cls = setTimeout(startPop, 1);
    if(vid.currentTime == vid.duration)
    {
        j = popInterval;
        i = 1
        clearTimeout(cls);
    }
}

function closePop()
{
    wrapper.style.display = "none";
    vid.play();
}

.wrapper
{
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 2147483647;
}

.content
{
  postion: relative;
  margin: 10% auto;
  width: max-content;
  padding: 10%;
  background-color: #FFF;
}

<video id = "video" controls = "" width = "1000px" height = "700px">
  <source src = "https://www.sample-videos.com/video/mp4/720/big_buck_bunny_720p_1mb.mp4" />
</video>

<div id = "wrp" class = "wrapper"> <!-- pop-up division-->
  <div class = "content">
    <h1>You are seeing a pop-up!</h1>
    <a href = "javascipt:void(0)" id = "btn" onclick = "closePop()">Close this pop-up</a>
  </div>
</div>

1 个答案:

答案 0 :(得分：1)

堆栈溢出编辑器包含用于添加工作代码的代码片段工具。我已经使用它转换了您的代码。实际上，它可以帮助所有人查看和编辑无效代码。

您的代码中出现的问题：您的代码正在运行，但已识别出锚标签被按钮标签不适当地关闭，可能是因为此原因。

关于`z-index`

无需使用最大值z-index。这定义了容器内元素的堆叠顺序。由于您的弹出窗口已经在视频之后定义，因此即使不提供z-index，它也会出现在其顶部。
尝试将其放在视频之前，您会发现它不可见，因为它在视频元素后面。为了解决这个问题，并且只要您的video和popup元素位于父容器中，请将z-index设置为1即可使popup元素出现在video元素的顶部。

var det = true;

var i = 1;
var popInterval = 2;
var cl;
var j = popInterval;
var vid = document.getElementById("video");

var wrapper = document.getElementById("wrp");

function check() {
  if (vid.currentTime > 0) {
    //clearInterval(cl);
    startPop();
  }
}
cl = setInterval(check, 1);

function startPop() {
  if (vid.currentTime == j || (vid.currentTime > j && vid.currentTime < j + 0.1)) {
    vid.pause();
    wrapper.style.display = "block";
    ++i;
    j = popInterval * i;
  }
  var cls = setTimeout(startPop, 1);
  if (vid.currentTime == vid.duration) {
    j = popInterval;
    i = 1
    clearTimeout(cls);
  }
}

function closePop() {
  wrapper.style.display = "none";
  vid.play();
}

.wrapper {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 1;
}

.content {
  postion: relative;
  margin: 10% auto;
  width: max-content;
  padding: 10%;
  background-color: #FFF;
}

<body>

  
  <div id="wrp" class="wrapper">
    <!-- pop-up division-->

    <div class="content">

      <h1>You are seeing a pop-up!</h1>
      <a href="javascipt:void(0)" id="btn" onclick="closePop()">Close this pop-up</a>
    </div>

  </div>
  
  <video id="video" controls="" width="1000px" height="700px">
    <source src = "video.mp4" />
  </video>


</body>