正确做法是用showModal()打开dialog，再动态设置图片src；必须添加dialog::backdrop样式，图片用max-width:90vw和object-fit:contain防止溢出，padding和flex居中确保显示完整。
dialog里放图片：别用display: none控制显隐
直接把<img>塞进<dialog>就行，但关键在触发和样式。常见错误是给<dialog>加display: none再用JS切block——这会破坏可访问性，ESC键失效，焦点管理丢失。
正确做法是用showModal()打开，靠浏览器原生逻辑处理遮罩、焦点捕获和ESC关闭：
- HTML中只写
<dialog id="zoom-dialog"><img id="zoom-img"></dialog>，不带open属性 - JS里调用
document.getElementById('zoom-dialog').showModal()后，再赋值src，避免预加载或占位问题 - CSS必须加
dialog::backdrop { background: rgba(0,0,0,.8); }，否则遮罩不可见（Safari 15.4+、Chrome 98+、Firefox 97+才支持） - 图片样式建议用
max-width: 90vw; max-height: 80vh; object-fit: contain;，防止拉伸或溢出
dialog里嵌视频：controls和poster不能少
<video>放进<dialog>本身没限制，但实际体验差往往出在属性遗漏。比如没加controls，用户点开弹窗就只能干看黑屏；没设poster，加载期间空白几秒，体验断层。
推荐结构如下：
立即学习“前端免费学习笔记（深入）”；
<dialog id="video-dialog">
<video controls poster="preview.jpg" preload="metadata">
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
您的浏览器不支持该视频格式。
</video>
</dialog>
-
preload="metadata"比auto更轻量，只加载头信息，避免弹窗一开就疯狂下载 - 双
<source>格式（MP4 + WebM）覆盖主流浏览器，Safari认MP4，Firefox/Chrome对WebM更友好 - 如果视频需自动播放，必须加
muted，否则Chrome/Firefox会静音拦截，且autoplay在<dialog>中触发时机不稳定，不建议强依赖 - 别在
<dialog>上直接设width/height，用CSS控制更灵活，例如video { width: 100%; max-width: 800px; }
dialog内媒体元素的尺寸与居中：max-width不是万能解
很多人以为给<img>或<video>加max-width: 100%就能自适应，但<dialog>默认是display: block且无内边距，内容容易贴边、偏上或被遮罩裁切。
- 给
<dialog>加padding: 2rem，避免媒体紧贴边缘 - 用
display: flex; align-items: center; justify-content: center;让内容真正在视口居中（注意<dialog>需设margin: 0 auto并限制max-width） -
object-fit: contain适合图片，但对<video>可能留黑边；若要填满又不失真，改用object-fit: cover，并确保video父容器有明确宽高比（如aspect-ratio: 16/9） - 移动端要注意
max-height: 80vh在小屏上可能仍超长，可配合@media (max-height: 500px)进一步收紧
兼容性兜底：旧浏览器不支持dialog怎么办
IE全系、Safari <dialog>内容直接平铺在页面里，既不遮罩也不模态。这不是样式问题，是元素未被识别。
- 检测支持性用
typeof HTMLDialogElement !== 'undefined'，不支持时动态替换为<div role="dialog">并手动绑定ESC监听和遮罩层 - 不要试图用
open属性“降级”——<dialog open>在不支持浏览器中只是普通块级元素，没有模态行为 - 第三方轻量方案如Micromodal.js可作备选，但体积约4KB，比原生
<dialog>多一次HTTP请求 - 最关键的是：所有媒体资源（图片URL、视频
src）必须在showModal()之后再注入，否则不支持环境下会提前加载并暴露在主文档流中
<dialog>，而是确保它在各种尺寸、各种浏览器、各种交互路径下都“刚好合适”——尤其是object-fit取值、preload策略和dialog::backdrop的透明度，三者稍有偏差，用户第一眼就会觉得“卡顿”或“错位”。 
