# 消息提示

顶部居中的轻量提示，自动消失。只提供方法调用，不需要写标记。

**依赖**：`zhaoui.css` 与 `zhaoui.js`（原生 HTML、CSS、JS，不需要框架或 jQuery）。

## 用法

```html
<script>
ZhaoUI.message('保存成功');
ZhaoUI.message('网络异常，请重试', { type: 'error', duration: 4000 });

var close = ZhaoUI.message('正在上传…', { type: 'info', duration: 0 });
// 完成后
close();
</script>
```

## 样式类

`zh-message`

## 方法

- `ZhaoUI.message(text, { type, duration })`：显示一条消息。type：success（默认）、info、warning、error；duration 为毫秒，默认 2400，传 0 则不自动消失。返回一个函数，调用即提前关闭。text 按纯文本处理

## 无障碍

- 容器是 aria-live="polite"；error 类型使用 role="alert"，其余为 role="status"
- 在模态框打开时调用，消息会显示在模态框之上（库会把容器放进打开的 <dialog>），关闭后自动挪回
- 不要把必须阅读的信息只放在消息里：它会自己消失

## 常见问题

### 消息提示是什么？

顶部居中的轻量提示，自动消失。只提供方法调用，不需要写标记。

### 怎么使用消息提示？

先在页面里引入 zhaoui.css 和 zhaoui.js（放在 </body> 前，不加 defer），再照本页「用法」里的标记书写；需要用代码控制时，用「方法」里列出的接口。

### 消息提示有哪些方法？

ZhaoUI.message(text, { type, duration })：显示一条消息。type：success（默认）、info、warning、error；duration 为毫秒，默认 2400，传 0 则不自动消失。返回一个函数，调用即提前关闭。text 按纯文本处理。

### 消息提示支持键盘和读屏吗？

容器是 aria-live="polite"；error 类型使用 role="alert"，其余为 role="status"；在模态框打开时调用，消息会显示在模态框之上（库会把容器放进打开的 <dialog>），关闭后自动挪回；不要把必须阅读的信息只放在消息里：它会自己消失。

### 消息提示需要依赖框架吗？

不需要。ZhaoUI 是原生 HTML、CSS 和 JavaScript，不依赖 jQuery、Vue 或 React。