一个很简单淡出框带关闭按钮方便二次开发this.uvTemp.addEventListener(click, () { this.createUvPopup(); this.uvPopup.style.display block; });关键的显示在于.display block;Css,Style 可能需要position:relative完整代码createUvPopup() { console.log(createUvPopup,this.uvPopup); if (this.uvPopup) return; this.uvPopup document.createElement(div); this.uvPopup.id tex-uv-popup; this.uvPopup.style.cssText position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 9999; width: min(760px, 90vw); background: rgba(20, 24, 30, 0.96); border: 1px solid rgba(255,255,255,0.12); border-radius: 12px; box-shadow: 0 25px 60px rgba(0,0,0,0.45); color: #fff; display: none; padding: 12px; box-sizing: border-box; ; this.uvPopup.innerHTML div styledisplay:flex; align-items:center; justify-content:space-between; margin-bottom:10px; font-size:13px; divUV 贴图叠加预览/div button typebutton stylepadding:4px 10px; border:none; border-radius:6px; cursor:pointer;关闭/button /div div styledisplay:flex; gap:12px; flex-wrap:wrap; justify-content:center; div styledisplay:flex; flex-direction:column; align-items:center; gap:6px; div stylefont-size:12px; color:#dfe7ff;原贴图 UV 点/div canvas idtex-uv-orig-canvas width300 height300 stylemax-width:100%; border-radius:8px; background:#fff; border:1px solid rgba(255,255,255,.18);/canvas /div div styledisplay:flex; flex-direction:column; align-items:center; gap:6px; div stylefont-size:12px; color:#dfe7ff;UV 贴图/div canvas idtex-uv-map-canvas width300 height300 stylemax-width:100%; border-radius:8px; background:#fff; border:1px solid rgba(255,255,255,.18);/canvas /div /div ; const closeBtn this.uvPopup.querySelector(button); closeBtn.addEventListener(click, () { this.uvPopup.style.display none; }); document.body.appendChild(this.uvPopup); }想当年啊两年前古法编程的优缺点优点写备注改新人代码改正乱掉再改正分架构分模块分杜段落方法重构缺点前后顺序调乱因为 z-index 控制元素的堆叠顺序。 你的结构中 tex-uv-popup: z-index: 9999 magnifier: z-index: 2 并且放大镜被移动到了 document.body.appendChild(this.magnifier); 所以放大镜和 UV 弹窗处于同一层级上下文中。虽然放大镜已经执行了 this.magnifier.style.display block; 但它实际被 tex-uv-popup 覆盖了因此看起来像是 Canvas 没有显示。 设置 this.magnifier.style.zIndex 10000; 后放大镜的层级高于 UV 弹窗的 9999所以可以显示在弹窗上方 另外原始放大镜的 z-index: 2 只适用于它作为 tex-preview-stage 子元素时移动到 document.body 后需要重新设置更高的层级。另一个很简单的放大镜效果完整代码Html Img 的适配问题你以为你有2~3年经验你很懂是么结果出了个naturalWidth属性img srcphoto.jpg width300 stylewidth: 200px;如果photo.jpg原始尺寸是 1200×800那么img.naturalWidth→1200img.width→300HTML 属性img.clientWidth→200CSS 渲染后的实际显示宽度naturalWidth是img元素的一个属性它表示的是图片文件本身的原始像素宽度也就是图片在没有任何 CSS 缩放、HTML 属性限制的情况下天生的宽度。决定因素naturalWidth完全由图片文件自身的数据决定具体来说图片文件的像素尺寸图片在被创建/导出时设定的宽高比如一张 1920×1080 的 PNGnaturalWidth就是 1920。图片格式中嵌入的分辨率信息如 JPEG 文件头中记录的像素宽高。不受什么影响不受img标签的width/height属性影响这些只影响显示尺寸。不受 CSS 的width/height影响CSS 缩放不改变naturalWidth。不受srcset/sizes影响虽然浏览器会根据这些选择不同分辨无厘头参考Panda BT ProPanda BT Pro | AI | Unity Asset Store