首页 | 简单教程,简单编程

代码编辑器：

<!DOCTYPE html>
<meta charset="utf-8">
<link href="/static/next/css/tryit.css?v=2017082407" rel="stylesheet"/>
<link href="/static/lib/jquery/jquery-growl/css/jquery.growl.css" rel="stylesheet" />
<ul>
    <li>
        <a class="error" href="#">错误!</a>
    </li>
    <li>
        <a class="notice" href="#">提醒!</a>
    </li>
    <li>
        <a class="warning" href="#">警告!</a>
    </li>
</ul>
<footer>简单教程，简单编程<br/>Copyright © 简单教程 www.twle.cn</footer>
<script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>
<script src="/static/lib/jquery/jquery-growl/js/jquery.growl.js" ></script>
<script>
$(function() {
    $.growl({
      title: "消息标题",
      message: "消息内容!"
    });

$('.error').click(function(event) {
      event.preventDefault();
      event.stopPropagation();
      return $.growl.error({
          title: "错误标题",
        message: "错误消息内容!"
      });
    });

$('.notice').click(function(event) {
      event.preventDefault();
      event.stopPropagation();
      return $.growl.notice({
          title: "提醒标题",
        message: "提醒消息内容!"
      });
    });

return $('.warning').click(function(event) {
      event.preventDefault();
      event.stopPropagation();
      return $.growl.warning({
          title: "警告标题",
        message: "警告消息内容!"
      });
    });
});
</script>

代码编辑器：

运行结果：