提示消息

下载psd文件

用来显示错误、提示、警告、公告等信息。

更新 v1.4.1：增加了一个记住当前关闭状态的功能。
更新 v1.1.4：增加了一个可选的关闭按钮。

小尺寸（默认尺寸）

错误信息提示

禁止信息提示

成功信息提示

警示信息提示

公告信息提示

提示信息提示

提醒信息提示

疑问信息提示

<div class="sui-msg msg-error">
  <div class="msg-con">错误信息提示</div>
  <s class="msg-icon"></s>
</div><br><br>
<div class="sui-msg msg-stop">
  <div class="msg-con">禁止信息提示</div>
  <s class="msg-icon"></s>
</div><br><br>
<div class="sui-msg msg-success">
  <div class="msg-con">成功信息提示</div>
  <s class="msg-icon"></s>
</div><br><br>
<div class="sui-msg msg-warning">
  <div class="msg-con">警示信息提示</div>
  <s class="msg-icon"></s>
</div><br><br>
<div class="sui-msg msg-notice">
  <div class="msg-con">公告信息提示</div>
  <s class="msg-icon"></s>
</div><br><br>
<div class="sui-msg msg-tips">
  <div class="msg-con">提示信息提示</div>
  <s class="msg-icon"></s>
</div><br><br>
<div class="sui-msg msg-info">
  <div class="msg-con">提醒信息提示</div>
  <s class="msg-icon"></s>
</div><br><br>
<div class="sui-msg msg-question">
  <div class="msg-con">疑问信息提示</div>
  <s class="msg-icon"></s>
</div>

六种尺寸：.input-mini, .input-small, .input-medium, .input-large, .input-xlarge, .input-xxlarge

复制代码

代码已复制

大尺寸

错误信息提示

禁止信息提示

成功信息提示

警示信息提示

公告信息提示

提示信息提示

提醒信息提示

疑问信息提示

<div class="sui-msg msg-large msg-error">
  <div class="msg-con">错误信息提示</div>
  <s class="msg-icon"></s>
</div><br><br>
<div class="sui-msg msg-large msg-stop">
  <div class="msg-con">禁止信息提示</div>
  <s class="msg-icon"></s>
</div><br><br>
<div class="sui-msg msg-large msg-success">
  <div class="msg-con">成功信息提示</div>
  <s class="msg-icon"></s>
</div><br><br>
<div class="sui-msg msg-large msg-warning">
  <div class="msg-con">警示信息提示</div>
  <s class="msg-icon"></s>
</div><br><br>
<div class="sui-msg msg-large msg-notice">
  <div class="msg-con">公告信息提示</div>
  <s class="msg-icon"></s>
</div><br><br>
<div class="sui-msg msg-large msg-tips">
  <div class="msg-con">提示信息提示</div>
  <s class="msg-icon"></s>
</div><br><br>
<div class="sui-msg msg-large msg-info">
  <div class="msg-con">提醒信息提示</div>
  <s class="msg-icon"></s>
</div><br><br>
<div class="sui-msg msg-large msg-question">
  <div class="msg-con">疑问信息提示</div>
  <s class="msg-icon"></s>
</div>

六种尺寸：.input-mini, .input-small, .input-medium, .input-large, .input-xlarge, .input-xxlarge

复制代码

代码已复制

成块级

错误信息提示

<div class="sui-msg msg-block msg-error">
  <div class="msg-con">错误信息提示</div>
  <s class="msg-icon"></s>
</div><br>
<div class="sui-msg msg-large msg-block msg-error">
  <div class="msg-con">错误信息提示</div>
  <s class="msg-icon"></s>
</div>

六种尺寸：.input-mini, .input-small, .input-medium, .input-large, .input-xlarge, .input-xxlarge

复制代码

代码已复制

清除模式

错误信息提示

<div class="sui-msg msg-clear msg-error">
  <div class="msg-con">错误信息提示</div>
  <s class="msg-icon"></s>
</div><br>
<div class="sui-msg msg-large msg-clear msg-error">
  <div class="msg-con">错误信息提示</div>
  <s class="msg-icon"></s>
</div>

清除模式区别于成块级模式，Msg内联状态独占一行，常用于表单校验

复制代码

代码已复制

默认字体颜色

公告信息提示

<div class="sui-msg msg-default msg-notice">
  <div class="msg-con">公告信息提示</div>
  <s class="msg-icon"></s>
</div><br><br>
<div class="sui-msg msg-large msg-default msg-notice">
  <div class="msg-con">公告信息提示</div>
  <s class="msg-icon"></s>
</div>

六种尺寸：.input-mini, .input-small, .input-medium, .input-large, .input-xlarge, .input-xxlarge

复制代码

代码已复制

去边框和底色

错误信息提示

<div class="sui-msg msg-naked msg-error">
  <div class="msg-con">错误信息提示</div>
  <s class="msg-icon"></s>
</div><br><br>
<div class="sui-msg msg-large msg-naked msg-error">
  <div class="msg-con">错误信息提示</div>
  <s class="msg-icon"></s>
</div>

六种尺寸：.input-mini, .input-small, .input-medium, .input-large, .input-xlarge, .input-xxlarge

复制代码

代码已复制

带关闭按钮

此类用法必须用于msg-block类型的消息上

1.4.1版本增加了一个记忆功能，只需要给 .sui-msg 加上一个id并且增加一个class remember，就可以自动记住当前消息的关闭状态（即关闭之后刷新页面也不会再显示出来）。注意这个功能是使用localStorage实现的。

通知：特色中国页面自13年４月上线以来，业务整合了更多的地域营销资源

重大消息：特色中国页面自13年４月上线以来，业务整合了更多的地域营销资源

自动记住关闭状态

通知：我会自动记住自己的关闭状态，关闭我并刷新页面试试

刷新之后点我显示消息

<div class="sui-msg msg-info msg-block">
  <div class="msg-con">通知：特色中国页面自13年４月上线以来，业务整合了更多的地域营销资源
    <button type="button" data-dismiss="msgs" class="sui-close">×</button>
  </div>
  <s class="msg-icon"></s>
</div>
<div class="sui-msg msg-large msg-tips msg-block">
  <div class="msg-con">重大消息：特色中国页面自13年４月上线以来，业务整合了更多的地域营销资源
    <button type="button" data-dismiss="msgs" class="sui-close">×</button>
  </div>
  <s class="msg-icon"></s>
</div>
<h4>自动记住关闭状态</h4>
<div id="msg-remember-demo" class="sui-msg msg-info msg-block remember">
  <div class="msg-con">通知：我会自动记住自己的关闭状态，关闭我并刷新页面试试
    <button type="button" data-dismiss="msgs" class="sui-close">×</button>
  </div>
  <s class="msg-icon"></s>
</div>
<p><a id="show-msg" href="javascript: void(0);" class="sui-btn btn-primary">刷新之后点我显示消息</a></p>
<script>
  $("#show-msg").click(function() {
    var $msg = $("#msg-remember-demo").show();
    localStorage.removeItem("sui-msg-" + $msg.attr("id"));
  });
</script>

六种尺寸：.input-mini, .input-small, .input-medium, .input-large, .input-xlarge, .input-xxlarge

复制代码

代码已复制

多行模式

多行提示展示
1、多行提多行提示展示多行提示展示多行提示展示多行提示展示多行提示展示多行提示展示多行提示展示
2、多行提多行提示展示多行提示展示多行提示展示多行提示展示多行提示展示多行提示展示多行提示展示

多行提示展示

1、多行提多行提示展示多行提示展示多行提示展示多行提示展示多行提示展示多行提示展示多行提示展示
2、多行提多行提示展示多行提示展示多行提示展示多行提示展示多行提示展示多行提示展示多行提示展示

<div class="sui-msg msg-question">
  <div class="msg-con"><strong>多行提示展示</strong><br>1、多行提多行提示展示多行提示展示多行提示展示多行提示展示多行提示展示多行提示展示多行提示展示<br>
    2、多行提多行提示展示多行提示展示多行提示展示多行提示展示多行提示展示多行提示展示多行提示展示
  </div>
  <s class="msg-icon"></s>
</div><br><br>
<div class="sui-msg msg-large msg-question">
  <div class="msg-con">多行提示展示
    <p>
      1、多行提多行提示展示多行提示展示多行提示展示多行提示展示多行提示展示多行提示展示多行提示展示<br>
      2、多行提多行提示展示多行提示展示多行提示展示多行提示展示多行提示展示多行提示展示多行提示展示
    </p>
  </div>
  <s class="msg-icon"></s>
</div>

六种尺寸：.input-mini, .input-small, .input-medium, .input-large, .input-xlarge, .input-xxlarge

复制代码

代码已复制

设计规范

开发者文档

小尺寸（默认尺寸）

大尺寸

成块级

清除模式

默认字体颜色

去边框和底色

带关闭按钮

自动记住关闭状态

多行模式