Как сделать всплывающее окно с кнопкой закрытия в верхней части полноэкранного видео - PullRequest
Новая
       2

Как сделать всплывающее окно с кнопкой закрытия в верхней части полноэкранного видео

0 голосов
/ 06 сентября 2018

Я создал небольшой пример проекта, в котором я играю видео, и в каждый данный интервал времени я показываю всплывающее окно с кнопкой закрытия во время паузы видео. При нажатии кнопки закрытия видео возобновляется. Проблема, с которой я столкнулся, заключается в том, что при воспроизведении видео в полноэкранном режиме отображается всплывающее окно (я использовал максимальное значение z-index для деления всплывающих окон), но кнопка закрытия не работает. 

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 голосов
/ 06 сентября 2018

Редактор переполнения стека содержит инструмент фрагмента кода для добавления рабочего кода. Я изменил ваш код, используя это. Это на самом деле помогает всем видеть и вносить изменения в нерабочий код.

Проблема в вашем коде: Ваш код работал, но обнаружил, что тег привязки был неправильно закрыт тегом кнопки, и, возможно, из-за этого.

О z-index

  • Нет необходимости использовать максимальное значение z-index. Это определяет порядок стека элементов в контейнере. Поскольку ваше всплывающее окно уже определено после видео, оно будет отображаться поверх него даже без указания z-index.
  • Попробуйте поставить его перед видео, и вы увидите, что его не видно, потому что оно находится за элементом видео. Для разрешения, и поскольку ваши видео и всплывающие элементы находятся в родительском контейнере, установка z-index в 1 заставит всплывающий элемент появляться поверх элемента 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...