javascript - 无法让 Modal 与 carousel-video sourced 一起工作

Question

所以我有来自 http://kenwheeler.github.io/slick/ 的轮播.我决定用我的旋转木马，一旦你点击图像，就会出现一个视频。好吧，我希望将此视频加载到具有关闭功能的模态图像中。 div id 的第一行代码....是点击视频后出现的图像。下面的其余部分我将只复制并粘贴第一部分。 (同一张图片/视频重复四次，直到我决定换掉)

 <section class="center slider">
 <div id="video" style="display:none;"><iframe width="560" height="315" src="https://www.youtube.com/embed/36_e3qbYhEs" frameborder="0"></iframe></div>
  <a href="javascript:document.getElementById('video').style.display = 'block'; document.getElementById('videopic').style.display = 'none'; void(0);">
  <img id="videopic" src="images/350x300.png" alt="Video Picture" /></a>



<div>
  <img src="http://placehold.it/350x300?text=2">
</div>
<div>
  <img src="http://placehold.it/350x300?text=3">
</div>
<div>
  <img src="http://placehold.it/350x300?text=4">
</div>
</section>

我的 JS 和 CSS 都可以正常工作 我只是无法植入点击图像的功能，“图像(视频)”将在新窗口中打开。对不起我的措辞。我是初学者，边学边学。我知道我想让它做什么，但不知道怎么做。

如果我需要进一步提供任何信息，请告诉我。

Answer 1

我认为您正在寻找的可能有助于您在谷歌搜索中使用的术语是您希望视频在灯箱中打开。

具体回答如何在您的特定情况下执行此操作对于本网站而言过于宽泛，即使您提供更多代码供我们查看也是如此。但通常实现此目的的方法是在单击幻灯片图像时使用 JavaScript 在一个或多个元素上切换一个类，添加该类将触发视频显示，而单击退出按钮将删除该类，因此一切恢复原状。

这是一个非常基本的示例，但您基本上可以采用这个概念并根据需要将其变得简单或复杂。例如，您可以在页面的 html 或 body 标记上切换一个类，然后根据该类是否调整页面上一堆东西的 CSS已应用。

如果您使用的是 jQuery，则有专门为此目的设计的插件，它们会自动为您提供大量设置，以执行诸如自动调整大小和在视口(viewport)中完美居中灯箱等操作，以及处理移动功能等。 Fancybox和 Colorbox有几个例子。

var lightboxImg = document.getElementsByTagName('img')[0];

lightboxImg.addEventListener('click', function(){
	this.parentNode.classList.toggle('lightbox');
});
document.getElementById('exit').addEventListener('click', function(){
	lightboxImg.parentNode.classList.toggle('lightbox');
});

/* relevant stuff */
#iframe {
	display: none;
	position: absolute;
	top: -100px;
	left: -100px;
}
#exit {
	position: absolute;
	top: 10px;
	right: -290px;
	padding: 5px;
	background-color: white;
}
section div.lightbox #iframe {
	display: block;
}
img:hover, #exit:hover {
  cursor: pointer;
}


/* just for display purposes */
html, body {
	height: 100%;
}
section {
	width: 400px;
	height: 300px;
	background-color: gold;
	position: relative;
	left: calc(50% - 200px);
	top: calc(50% - 150px);
}
section div {
	position: relative;
	top: 50px;
	left: 50px;
	width: 300px;
	height: 200px;
}

<section class="center slider">
	<div>
		<img src="http://placehold.it/300x200?text=click%20me">
		<div id="iframe"><img src="http://placehold.it/600x400?text=your%20iframe"><span id="exit">X</span></div>
	</div>
</section>