Metro UI CSS Info Box 组件完整指南：从基础用法到源码级配置解析

• 前端
• UI组件

本文是 Metro UI CSS 前端框架中 Info Box 组件的专项技术指南，聚焦该组件在信息提示、告警、确认对话框等场景下的完整使用方法：涵盖 HTML 声明式初始化、jQuery/静态 API 调用、全部插件参数、事件回调、CSS 变量主题定制与两种高级变体（info-box2、more-info-box）。读完本文，你将能够独立实现一个带遮罩、自动隐藏、可动态创建与销毁的模态信息框，并掌握其底层实现原理。

组件概览

Info Box 是 Metro UI CSS 提供的一个多用途模态对话框组件，用于向用户展示**信息（info）、告警（alert）、警告（warning）和成功（success）**消息。它支持自定义内容、遮罩层（overlay）以及自动关闭，默认将元素定位在屏幕正中央，适合作为轻量级提示、操作结果反馈或简单确认交互的载体。

在仓库中，该组件的源码位于 source/components/info-box/，共包含 4 个文件：

依赖关系：从 index.js 可以看到，组件入口依次导入../../farbe/index.js（Farbe 颜色处理模块）、../../colors-css/index.js（Colors CSS 模块），随后才导入本组件的 JS 与 LESS。因此使用 Info Box 前，项目中必须已经包含Metro UI core、Farbe 模块和Colors CSS 模块这三个基础依赖。

基础用法：HTML 声明式初始化

Info Box 遵循 Metro UI CSS 的data-role声明式初始化约定：只要在元素上添加data-role="info-box"，框架初始化时会自动将其实例化为 Info Box 组件。

<!-- 默认设置的 info box --> <div>// 以默认配置初始化 $("#myInfoBox").infobox(); // 传入自定义配置 $("#myInfoBox").infobox({ type: "alert", width: 400, overlay: true, overlayClickClose: true, autoHide: 5000 });

静态 API 动态创建

无需预先在 HTML 中书写任何结构，直接用Metro.infobox.create()即可动态创建并（默认）打开一个 Info Box：

Metro.infobox.create( "Your message here", "success", { overlayClickClose: true, autoHide: 3000 } );

对应源码实现在 info-box.js 的Metro.infobox.create：它动态向body追加一个div，内部放入.info-box-content，将removeOnClose: true与type合并进用户传入的 options（并标记_runtime: true），然后调用el.infobox(ib_options)完成初始化、设置内容，最后在open !== false时自动打开。这意味着动态创建的 Info Box 在关闭时会自动从 DOM 中移除，适合一次性提示场景。

插件参数详解

以下为 README.md 给出的完整参数表，与 info-box.js 中InfoBoxDefaultConfig的默认值一一对应：

关键参数的源码级说明

• type：从setType方法可以看到，切换类型时会执行element.removeClass("success info alert warning").addClass(t)，即类型通过互斥的 CSS 类实现，确保同一时刻只应用一种语义样式；
• overlayColor与overlayAlpha：在_overlay方法中，若overlayColor为字符串"transparent"，遮罩直接追加transparent类实现完全透明；否则调用Farbe.Routines.parse()解析颜色、Farbe.Routines.toRGBA()结合overlayAlpha生成带透明度的 RGBA 背景。这正是组件依赖 Farbe 模块的原因；
• overlayClickClose：在open方法中，只有该选项为true时才会为遮罩绑定点击关闭事件；同时注意$(".overlay").length === 0的判断，避免重复追加遮罩；
• autoHide：open方法中Number.parseInt(o.autoHide) > 0时设置setTimeout自动调用close()；
• removeOnClose：在close方法中为true时执行this.destroy()并从 DOM 移除元素，适用于动态创建的一次性实例（Metro.infobox.create默认强制开启）；
• width/height：直接通过element.css()设置；样式层还通过max-width: calc(100vw - 100px)与max-height: calc(100vh - 100px)（见 info-box.less）约束在小屏幕上不会溢出视口。

事件回调

组件通过Metro.Component的事件系统对外暴露以下回调（默认值均为Metro.noop）：

从源码看，三个事件的触发点分别为：_create中完成结构与事件绑定后通过_fireEvent("info-box-create", ...)触发创建事件；open方法中在元素变为可见后触发_fireEvent("open")；close方法中在隐藏元素后触发_fireEvent("close")。此外在_createEvents中，组件为.closer和.js-dialog-close（用于确认对话框中的“取消”按钮）统一绑定了点击关闭逻辑，并监听窗口resize事件调用reposition()，保证窗口尺寸变化时 Info Box 始终居中。

API 方法

组件实例方法

reposition/_setPosition的实现为：top = (window高度 - 元素外高) / 2、left = (window宽度 - 元素外宽) / 2，即严格的视口水平、垂直居中。isOpen则通过元素上的data("open")标志判断，而非实时读取可见性样式。

静态 API 方法

所有静态方法内部都会先通过Metro.utils.isMetroObject(el, "infobox")校验元素是否已初始化为 Info Box，未初始化则返回false；随后经Metro.getPlugin(el, "infobox")获取组件实例再调用对应实例方法。这也解释了为什么官方示例页 examples/info-box.html 中可以用Metro.getPlugin('#info-box', 'info-box').open()直接驱动已有实例。

全局配置

如果需要为所有 Info Box 统一设置默认值，可以调用Metro.infoBoxSetup()：

Metro.infoBoxSetup({ width: 400, overlayClickClose: true, // 其他参数 });

从源码看，Metro.infoBoxSetup通过$.extend({}, InfoBoxDefaultConfig, options)浅合并到默认配置对象InfoBoxDefaultConfig上，此后所有新初始化的 Info Box 都会以此为基础。另外，组件还支持全局声明式配置：若globalThis.metroInfoBoxSetup在脚本加载前已被定义，组件会自动读取并应用它（对应 info-box.js 中的if (typeof globalThis.metroInfoBoxSetup !== "undefined")分支）。因此也可以在页面中提前放置：

<script> window.metroInfoBoxSetup = { overlayClickClose: true, autoHide: 4000 }; </script>

使用 CSS 变量定制主题

Info Box 采用 CSS 变量驱动主题，可同时覆盖浅色与深色模式（.dark-side作用域）。

基础 Info Box 变量

More Info Box 变体变量

这些变量的默认值定义在 info-box.less 的:root与.dark-side作用域中；其中深色模式下--more-info-box-background被替换为linear-gradient(to right, rgba(255, 238, 238, 0.15), rgba(255, 252, 252, 0.1))。

自定义单个实例样式

CSS 变量的作用域特性允许你针对单个 Info Box 覆写：

/* 为指定 info box 定制样式 */ #myCustomInfoBox { --info-box-background: #e3f2fd; --info-box-color: #0d47a1; --info-box-border-color: #bbdefb; --info-box-border-radius: 10px; }

将该id应用到data-role="info-box"元素上即可生效。

可用 CSS 类

基础类

• .info-box— Info Box 主容器（position: fixed，置于视口中央，z-index 使用@z-index-modal层级）
• .info-box-content— 内容容器（默认padding: 20px）
• .closer— 右上角关闭按钮（默认渲染为 × 符号）

类型修饰类

• .success— 成功消息样式
• .info— 信息消息样式
• .alert— 告警消息样式
• .warning— 警告消息样式

扩展变体

• .info-box2— 更简化的变体，包含标题（title）与数值（value）区块，见 info-box.less 中.info-box2的定义：纵向 flex 布局，标题为 9px 大写文本，数值区支持primary-value/secondary-value主次数值对比；
• .more-info-box— 带图标与“更多”区域的变体，固定高度 128px，右侧 64px 图标（hover 时放大 1.2 倍），底部通栏more区域，适合展示大数值指标加跳转链接的场景。

实战示例

告警消息

// 展示一条警告消息，10 秒后自动关闭 Metro.infobox.create( "<h4>Warning</h4><p>Your session will expire in 5 minutes.</p>", "warning", { autoHide: 10000, closeButton: true } );

确认对话框

利用.js-dialog-close内置的点击关闭绑定，可以快速搭建一个确认对话框——无需额外编写关闭逻辑：

<div id="confirmDialog">赞分享