对话框

<div class="demo-row">  <button class="btn" data-modal-open="demo-modal-sm">小号对话框</button>  <button class="btn" data-modal-open="demo-modal-md">默认对话框</button>  <button class="btn" data-modal-open="demo-modal-lg">大号对话框</button>  <button class="btn" data-modal-open="demo-sheet-right">右侧 Sheet</button></div> <div class="modal-backdrop" data-modal="demo-modal-sm" hidden>  <div class="modal modal--sm">    <div class="modal-header">      <div>        <h3 class="modal-title">小号对话框</h3>        <p class="modal-description">max-width 360px，Esc / 点击遮罩可关闭</p>      </div>      <button class="modal-close" data-modal-close aria-label="关闭">×</button>    </div>    <div class="modal-body">      <p>焦点已锁定在对话框内：Tab 会在关闭钮与底部按钮之间循环，关闭后焦点还原到触发按钮。</p>    </div>    <div class="modal-footer">      <button class="btn btn-sm" data-modal-close>取消</button>      <button class="btn btn-sm btn-primary" data-modal-close>确定</button>    </div>  </div></div> <div class="modal-backdrop" data-modal="demo-modal-md" hidden>  <div class="modal">    <div class="modal-header">      <div>        <h3 class="modal-title">默认对话框</h3>        <p class="modal-description">max-width 480px</p>      </div>      <button class="modal-close" data-modal-close aria-label="关闭">×</button>    </div>    <div class="modal-body">      <p>面板进场为 dialogScaleIn 200ms：scale(.96) translateY(8px) → scale(1) translateY(0)。</p>      <p>同时只允许打开一个浮层对话框——打开另一个会自动关掉当前这个。</p>    </div>    <div class="modal-footer">      <button class="btn btn-sm" data-modal-close>取消</button>      <button class="btn btn-sm btn-primary" data-modal-close>保存</button>    </div>  </div></div> <div class="modal-backdrop" data-modal="demo-modal-lg" hidden>  <div class="modal modal--lg">    <div class="modal-header">      <div>        <h3 class="modal-title">大号对话框</h3>        <p class="modal-description">max-width 640px，内容超高时 modal-body 内部滚动</p>      </div>      <button class="modal-close" data-modal-close aria-label="关闭">×</button>    </div>    <div class="modal-body">      <p>背景已滚动锁定（body overflow 关闭时恢复旧值）。</p>      <p>尺寸档：modal--sm 360 / 默认 480 / modal--lg 640 / modal--xl 800 / modal--full 全屏。</p>    </div>    <div class="modal-footer">      <button class="btn btn-sm" data-modal-close>关闭</button>    </div>  </div></div> <div class="modal-backdrop" data-modal="demo-sheet-right" hidden>  <div class="modal modal--sheet-right">    <div class="modal-header">      <div>        <h3 class="modal-title">右侧 Sheet</h3>        <p class="modal-description">宽 360px，translateX(40px) 滑入</p>      </div>      <button class="modal-close" data-modal-close aria-label="关闭">×</button>    </div>    <div class="modal-body">      <p>Sheet 变体：modal--sheet-left / right / top / bottom，圆角只保留非贴边侧。</p>      <p>宽度档：默认 360px，modal--sheet-sm 280px，modal--sheet-lg 480px（上下方向为 300px / 50vh）。</p>    </div>    <div class="modal-footer">      <button class="btn btn-sm" data-modal-close>关闭</button>    </div>  </div></div>