跳到正文

消息提示

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

带行为 核心包 1 个方法

示例

在线试用 Markdown 版

代码

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

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

方法

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

样式类

zh-message

无障碍

  • 容器是 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。