如何用jQuery实现如图样式的信息提示框？已试ui-state-info类未成功

嘿，看你之前用了ui-state-error类，这是错误提示的样式，当然和你想要的信息提示框不匹配啦！要实现你图里的那种样式，只需要把错误相关的类换成信息类的对应类就可以了，具体调整如下：

正确的代码示例 #

<div class="ui-widget">
  <div class="ui-state-info ui-corner-all" style="padding: 0 .7em;">
    <p>
      <span class="ui-icon ui-icon-info" style="float: left; margin-right: .3em;"></span>
      <strong>Info:</strong> Sample ui-state-info style.
    </p>
  </div>
</div>

关键调整点 #

• 把ui-state-error替换成ui-state-info：这是jQuery UI里专门用于信息提示的状态类，会应用浅蓝色的背景等信息类样式
• 把ui-icon-alert替换成ui-icon-info：对应信息类的图标，就是你图里那种带圆圈的"i"样式图标
• 标题从Alert:改成Info:，和提示类型更匹配

另外要注意，确保你已经正确加载了jQuery UI的完整CSS文件，不然这些样式类不会生效哦。如果还是有问题，检查一下CSS文件的引入顺序，要在自定义样式之前加载jQuery UI的样式资源。

内容的提问来源于stack exchange，提问作者Developer