这里用到灯箱js
Lightbox.js
地址：https://victordiego.com/lightbox/
您需要的一切都位于 lightbox/ 目录下。在您的 HTML 文档中包含 javascript 和 css 文件，您就完成了所有设置：
<link href="lightbox/lightbox.min.css" rel="stylesheet"> <script src="lightbox/lightbox.min.js"></script>
用法
将data-lightbox属性添加到<a>标签并将其href设置为您希望在灯箱中打开的内容。打开图像时，您可以使用data-image-alt属性发送其替代文本：
<a href="assets/dist/img/image-1.png" data-lightbox data-image-alt="Image 1"> Image</a><a href="#modal" data-lightbox> Modal</a><a href="https://vimeo.com/83897470" data-lightbox> Vimeo</a><a href="https://www.youtube.com/watch?v=Xyu_MdKBXic" data-lightbox> Youtube</a><div id="modal" class="lightbox-hide"> <div class="modal-content"> <h3>Welcome!</h3> <p>Sign in to your account.</p> <form> <input type="email" name="email" placeholder="e-mail account"> <input type="password" name="password" placeholder="password"> <input class="btn" type="submit" name="submit" value="Sign In"> </form> </div></div>
画廊
在同一父元素下的所有<a>标签上将data-lightbox属性 设置为“gallery” ，将自动找到任何上一个或下一个项目：
<div class="gallery"> <div class="gallery-item"> <a href="assets/dist/img/image-1.png" data-lightbox="gallery" data-image-alt="Image 1"> <img src="assets/dist/img/thumbnail-gallery.png" alt="Thumbnail 1"> </a> </div> <div class="gallery-item"> <a href="assets/dist/img/image-2.png" data-lightbox="gallery" data-image-alt="Image 2"> <img src="assets/dist/img/thumbnail-gallery.png" alt="Thumbnail 2"> </a> </div></div>