Question

我有这段代码，但我不知道如何在外面点击时隐藏视频。

这是我的代码：

$(".popup").click(function () {
  var $this = $(this);
  var $iframe = $("<iframe>").attr("src", $this.data("link")).css({"width": 400, "height": 300});
  var $title = $("<h1>").text($this.data("title"));
  $("#video-view").html($title).append($iframe);
  $iframe.wrap("<div class='class-video'>");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="popup" href="#!" data-link="https://www.youtube.com/embed/klModGpSKtc"><img class="img" src="img/annual-smb-report.png"/></a>
<div id="video-view">
</div>

我尝试了一切，但显然我做错了。

提前谢谢。

Answer 1

诀窍是在所有屏幕上添加隐藏图层。当用户点击该图层时，您将隐藏电影。

请注意z-index，这很重要。

像这样：

＆＃13;

$(".popup").click(function () {
  var $this = $(this);
  var $iframe = $("<iframe>").attr("src", $this.data("link")).css({"width": 400, "height": 300});
  var $title = $("<h1>").text($this.data("title"));
  $("#video-view").html($title).append($iframe);
  $iframe.wrap("<div class='class-video'>");
  $('.overlay').show();
});

$('.overlay').click(function(){
  $(this).hide();
  $('#video-view').html('');
});

＆＃13;

#video-view {
  z-index: 2;
  position:relative;
  display: inline-block;
}

.overlay {
  position: absolute;
  z-index:1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="popup" href="#!" data-link="https://www.youtube.com/embed/klModGpSKtc"><img class="img" src="img/annual-smb-report.png"/></a>
<div id="video-view">
</div>
<div class="overlay"></div>

＆＃13;

Answer 2

此示例显示点击图片时的视频，并在您点击其他任何位置时隐藏：

＆＃13;

$(".popup").click(function (e) {
  e.stopPropagation();
  var $this = $(this);
  var $iframe = $("<iframe>").attr("src", $this.data("link")).css({"width": 400, "height": 300});
  var $title = $("<h1>").text($this.data("title"));
  $("#video-view").html($title).append($iframe);
  $iframe.wrap("<div class='class-video'>");
});

$(document).click(function() {
  $("#video-view").empty();
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="popup" href="#!" data-link="https://www.youtube.com/embed/klModGpSKtc"><img class="img" src="img/annual-smb-report.png"/></a>
<div id="video-view">
</div>

＆＃13;

如何在外部点击时隐藏嵌入式视频弹出窗口？

2 个答案: