Question

我有一个播放电影的简单弹出窗口，并且有一个十字架来关闭弹出窗口和电影。

这一次工作正常，但是如果重新打开，则无法再次关闭弹出窗口。我们可以在此处播放多个视频，由于某种原因，交叉按钮t close首先会起作用，但如果重新打开弹出窗口，则不会起作用。

有人有什么建议吗？似乎交叉函数只能运行一次。

$('.video-popup').click(function(e) {
  $('.overlay').fadeIn();
  $(this).parent('.video-img').find('.video-container, .close-video').fadeIn();
  e.stopPropagation();
});
$('.close-video').click(function(f) {
  vimeoWrap = $('.video-container');
  vimeoWrap.html(vimeoWrap.html());
  $('.overlay, .video-container, .close-video').fadeOut();
  f.stopPropagation();
});

.video-container {
  position: fixed;
  z-index: 99;
  max-width: 800px;
  left: 50%;
  top: 50%;
  height: 500px;
  display: none;
  width: 100%;
  padding: 0 15px;
}

.overlay {
  position: fixed;
  height: 100%;
  width: 100%;
  background: rgba(0, 14, 60, 0.8);
  z-index: 9;
  display: none;
  top: 0;
  left: 0;
  right: 0;
}

.close-video {
  position: absolute;
  z-index: 99;
  top: -50px;
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="pdf-video-block">
  <div class="video-img">
    <img src="https://d1e4pidl3fu268.cloudfront.net/66963e4a-ccba-4fdd-ba18-d5862fb4dba7/test.png" class="video-popup">

    <div class="video-container">
      <div class="close-video">X</div>
      <iframe src="https://player.vimeo.com/video/8733915" width="100%" height="500" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe>
    </div>
  </div>
</div>

谢谢

Answer 1

对我来说它是这样的：

$('.video-popup').click(function(e) {
  $('.overlay').fadeIn();
  $('.video-container, .close-video').fadeIn();
  e.stopPropagation();
  e.stopPropagation();
});
$('.close-video').click(function(f) {
  //vimeoWrap = $('.video-container');
  //vimeoWrap.html(vimeoWrap.html());
  $('.overlay, .video-container, .close-video').fadeOut();
  f.stopPropagation();
});

.video-popup {
  width: 100px;
  height: 100px;
}

.video-container {
  position: fixed;
  z-index: 99;
  max-width: 800px;
  left: 50%;
  top: 50%;
  margin-top: 0;
  margin-left: 0;
  height: 500px;
  display: none;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  width: 100%;
  padding: 0 15px;
}

.overlay {
  position: fixed;
  height: 100%;
  width: 100%;
  background: rgba(0, 14, 60, 0.8);
  z-index: 9;
  display: none;
  top: 0;
  left: 0;
  right: 0;
}

.close-video {
  position: absolute;
  z-index: 99;
  top: 100px;
  left: 20px;
  display: none;
  cursor: pointer;
  color: white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<img src="https://d1e4pidl3fu268.cloudfront.net/66963e4a-ccba-4fdd-ba18-d5862fb4dba7/test.png" class="video-popup">
<div class="overlay"></div>
<div class="video-container">
<div class="close-video" style="display: block;">X</div>
<iframe src="https://player.vimeo.com/video/317230912" width="100%" height="500" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe>
</div>

Answer 2

您当前的点击侦听器已被vimeoWrap.html(vimeoWrap.html());淘汰。

只需将侦听器放在父对象上，即使您重置了html（只是更改了第一行），它也将起作用：

$('.video-container').on("click",".close-video", function(f)  {
  ...
});

Answer 3

您需要更改关闭功能，例如：

$('body').on('click', '.close-video', function(f) {
//instead of
//$('.close-video').click(function(f) {

因为更改了父元素（如下所示）后，您将无法再访问此元素。

vimeoWrap = $('.video-container');
vimeoWrap.html(vimeoWrap.html());

多次打开后，弹出窗口无法关闭

3 个答案: