Lightbox 效果是网页中常见的效果，尤其是在图片展示中，它可以让用户以更大的尺寸、更好的画质查看图片，带来刚好的用户体验。本站也介绍过许多优秀的 lightbox 插件/库，如Zoomify、JK Responsive、Simple Lightbox、Boxer和baguetteBox.js等等，今天，我们使用 HTML5 的 dialog 标签制作一个简单好用的 lightbox 效果。
制作方法
1、引入文件
我们引入 CSS 重置库 normalize（非必需）：
<linkrel="stylesheet"href="css/normalize.min.css">
2、HTML
使用 HTML 搭建一个简单的图片结构（使用已有的也行）：
<divclass="zztuku_com"><imgsrc="images/1-1.jpg"alt=""><imgsrc="images/1-2.jpg"alt=""><imgsrc="images/1-3.jpg"alt=""><imgsrc="images/1-4.jpg"alt=""><imgsrc="images/1-5.jpg"alt=""><imgsrc="images/1-6.jpg"alt=""><imgsrc="images/1-7.jpg"alt=""><imgsrc="images/1-1.jpg"alt=""><imgsrc="images/1-2.jpg"alt=""><imgsrc="images/1-3.jpg"alt=""><imgsrc="images/1-4.jpg"alt=""><imgsrc="images/1-5.jpg"alt=""><imgsrc="images/1-6.jpg"alt=""><imgsrc="images/1-7.jpg"alt=""></div>
3、CSS
使用 CSS 把 HTML 里的图片美化成图片墙：
.zztuku_com{display:grid;gap:1rem;grid-template-columns:repeat(4,1fr);grid-auto-flow:rowdense;width:90%;margin:auto;}.zztuku_comimg{max-width:100%;height:auto;}.zztuku_com>:nth-child(7n+1){grid-column:span2;grid-row:span2;}.zztuku_comimg{display:block;aspect-ratio:1/1;border-radius:6px;-o-object-fit:cover;object-fit:cover;overflow:hidden;}dialog.lightbox{border:none;padding:0;-webkit-animation:fadeIn0.3sease-out;animation:fadeIn0.3sease-out;background-color:transparent;}dialog.lightbox::-webkit-backdrop{background-color:rgba(0,0,0,0.4);}dialog.lightbox::backdrop{background-color:rgba(0,0,0,0.4);}dialog.lightboximg{-o-object-fit:contain;object-fit:contain;display:block;overflow:hidden;height:100%;width:100%;max-width:90vw;max-width:90dvw;max-height:90vh;max-height:90dvh;border-radius:6px;}@-webkit-keyframesfadeIn{from{opacity:0;}to{opacity:1;}}@keyframesfadeIn{from{opacity:0;}to{opacity:1;}}
4、JavaScript
JS 是关键，因为本例就是使用 JS 创建 dialog 标签，并克隆图片插入到 dialog 中，再控制它显示/隐藏来达到效果的，具体的步骤请查看 JS 代码中的注释：
document.querySelectorAll('.zztuku_comimg').forEach((img)=>{img.addEventListener('click',(e)=>{//创建dialogconstdialog=document.createElement('dialog')dialog.className='lightbox'//克隆img并放入dialog中constimgClone=img.cloneNode()dialog.appendChild(imgClone)//把dialog插入到body中document.body.appendChild(dialog)dialog.showModal()document.body.setAttribute('inert',true)//关闭dialog事件dialog.addEventListener('click',(e)=>{if(e.target===e.currentTarget){dialog.close()}})//dialog关闭方法dialog.addEventListener('close',(e)=>{dialog.parentNode.removeChild(dialog)document.body.removeAttribute('inert')})})})
到这里就制作完了，你可以查看效果。
本例之所以说简单，是因为它对现有的代码几乎没有耦合度，只需要把上面 JS 代码中的选择对象修改一下即可。
产品猿社区致力收录更多优质的商业产品，给服务商以及软件采购客户提供更多优质的软件产品，帮助开发者变现来实现多方共赢；
日常运营的过程中我们难免会遇到各种版权纠纷等问题，如果您在社区内发现有您的产品未经您授权而被用户提供下载或使用，您可按照我们投诉流程处理，点我投诉；
本文来自用户发布投稿，不代表产品猿立场 ；若对此文有疑问或内容有严重错误，可联系平台客服反馈；
部分产品是用户投稿，可能本文没有提供官方下下载地址或教程，若您看到的内容没有下载入口，您可以在我们产品园商城搜索看开发者是否有发布商品；若您是开发者，也诚邀您入驻商城平台发布的产品，地址：点我进入；
如若转载，请注明出处：https://www.chanpinyuan.cn/38221.html；
