N Nexus UI Component Library
v3.0
陈
由页面以纯 HTML 打开并书写内容。 ========================================================================= -->
Overlay / 01

Modal 弹窗 · 大中小

四种宽度规格（380 / 520 / 760 / 980 px）同页对比，并演示确认、拖拽、分享、扫码与视频五种常用场景。遮罩点击、右上角关闭按钮与 Esc 键均可关闭弹窗。

四种尺寸

.modal-sm / 默认 / .modal-lg / .modal-xl
Small 380px

最窄规格，用于单句提示、轻量确认与扫码等小型浮层。

Default 520px

默认宽度，承载表单、邀请、设置等常规交互，最常用的规格。

Large 760px

双栏内容宽度，适合分享面板、视频播放、富文本预览。

X-Large 980px

最宽规格，用于数据表格、详情对比等大信息量场景。

五种场景弹窗

confirm / drag / share / qr / video
确认弹窗（危险操作）

删除类操作必须二次确认，弹窗内使用 .alert.danger 说明不可逆后果，主按钮使用 .btn-danger。

拖拽弹窗

标题栏内置抓手（cursor: grab），用于示意可拖动的浮动面板；本页以静态 UI 呈现，真实拖动需在业务层绑定指针事件。

分享弹窗（.modal-lg 双栏）

左侧为分享卡片预览，右侧为渠道矩阵，支持复制链接、生成海报与扫码分享。

微信 朋友圈 微博 QQ
扫码弹窗

二维码居中展示，配合 .spin 呈现等待扫码状态，适合登录、支付与设备配对。

视频弹窗

弹窗内嵌 16:9 播放器，标题与操作按钮固定在头部与底部，中间区域整体贴边，适合课程试看、产品演示与直播回放。

规格与行为对照

spec sheet
规格类名最大宽度典型场景遮罩关闭
小.modal-sm380px轻量确认、扫码、单句提示支持
默认.modal520px表单、邀请、设置项支持
大.modal-lg760px分享面板、视频、双栏内容支持
超大.modal-xl980px数据表格、详情对比建议保留按钮
打开与关闭
打开用 data-ov-open（值写目标浮层的 id），关闭用 data-ov-close；遮罩点击与 Esc 键由全局脚本统一处理。
表单类弹窗不要用遮罩关闭
用户误触遮罩会丢失已填写内容，此时应去掉遮罩点击关闭，仅保留取消与确认按钮。