<link href="css/toastr.min.css" rel="stylesheet" />
<script src="js/jquery/3.4.1/jquery.min.js" ></script>
<script src="js/toastr/toastr.min.js"></script>
// 常规消息提示,默认背景为浅蓝色
toastr.info("你有新消息了!");
// 成功消息提示,默认背景为浅绿色
toastr.success("你有新消息了!");
// 警告消息提示,默认背景为橘黄色
toastr.warning("你有新消息了!");
// 错误消息提示,默认背景为浅红色
toastr.error("你有新消息了!");
// 带标题的消息框
toastr.success("你有新消息了!","消息提示");
// 另一种调用方法
toastr["info"]("你有新消息了!","消息提示");
// 通过设置自定义参数,可达到不同的效果
toastr.options = {
closeButton: false, // 是否显示关闭按钮(提示框右上角关闭按钮)
debug: false, // 是否为调试(提示框右上角关闭按钮)
progressBar: true, // 是否显示进度条(设置关闭的超时时间进度条)
positionClass: "toast-bottom-center", // 消息框在页面显示的位置
onclick: null, // 点击消息框自定义事件
showDuration: "300", // 显示动作时间
hideDuration: "1000", // 隐藏动作时间
timeOut: "2000", // 自动关闭超时时间
extendedTimeOut: "1000", //
showEasing: "swing", //
hideEasing: "linear", //
showMethod: "fadeIn", // 显示的方式,和jquery相同
hideMethod: "fadeOut" // 隐藏的方式,和jquery相同
};
positionClass
参数可以有以下取值:
the end