CSS部分触发图片Style/*trigger图片样式*/.myImg{border-radius:5px;游标：指针；transition:0.3s;}.myImg:hover{opacity:0.7;}模态框样式/*模态框样式*/。模态{显示：无；/*默认隐藏*/position:fixed;/*相对浏览器定位*/z-index:1;/*放在第一位*/padding-top:100px;/*向头部添加填充*/left:0;顶部：0；宽度：100%；/*全宽*/高度：100%；/*全高*/overflow:auto;/*允许滚动超出*/background-color:rgba(0,0,0,0.9);}模态框内容样式/*模态框内容样式*/.modal-content{margin:0auto;/*居中*/显示：块；宽度：80%；max-width:700px;}/*添加断点，响应式改变宽度*/@mediaonlyscreenand(max-width:700px){.modal-content{width:100%;}}#caption{边距：0自动；/*居中*/显示：块；宽度：80%；最大宽度：700px；文本对齐：居中；颜色：#ccc；填充：10px0；.modal-content,#caption{animation-name:zoom;animation-duration:0.6s;}@keyframeszoom{from{transform:scale(0)}to{transform:scale(1)}}/*关闭按钮样式*/.close{position:absolute;顶部：15px；右：35px；颜色：#f1f1f1；字体大小：40px；字体粗细：粗体；过渡：0.3s;}.close:hover{颜色：#bbb;文字修饰：无；游标：指针；}JavaScript内容离开global(function(){})();创建模态图像对象/*模态图像对象*/varmodalImg={};写入模态图像对象/*触发图像*/modalImg.triggerImg=document.getElementsByClassName('myImg');/*关闭按钮*/modalImg.closeBtn=document.getElementById('closeBtn');/*模态背景*/modalImg.modal=document.getElementById('myModal');/*模态图像*/modalImg.img=document.getElementById("img01");/*模态图像标题*/modalImg.captionText=document.getElementById("caption");/*模态图像显示*/modalImg.show=function(){this.modal.style.display="block";this.img.src=this.triggerImg[0].src;this.captionText.innerText=this.triggerImg[0].alt;}/*模态图像关闭*/modalImg.close=function(){this.modal.style.display="none";}/*点击模态图像外的区域，模态图像关闭*/modalImg.outsideClick=function(){varthat=this;window.onclick=function(event){if(event.target==that.modal){that.close();}}}/*初始化*/modalImg.init=function(){varthat=this;this.triggerImg[0].onclick=function(){that.show();}this.closeBtn.onclick=function(){that.close();}这。外部点击（）；}call/*模态地图调用*/modalImg.init();好了，现在所有的代码都写好了！赶紧打开浏览器看看效果吧！在这里，只是给大家提供一个思路，具体实现可以参考一下，每个人可以有不同的方法。请快快发挥你的想象力，把你最想在电脑上实现的功能打出来吧！来自w3cschools的代码参考