1.Toastr消息弹出提示框(信息提示框)
1.Toastr是非阻塞通知的JavaScript库,消息通知插件toastr,包括错误告警,信息告警,成功告警,一般告警,还有删除操作。
使用起来也非常方便 ,有success、info、warning、error、remove等方法,toastr是一个基于Jquery简单、漂亮的消息提示插件,使用简单、方便,可以根据设置的超时时间自动消失。
官网:https://codeseven.github.io/toastr/
举例:
//常规消息提示,默认背景为浅蓝色
toastr.info("你有新消息了!");
//成功消息提示,默认背景为浅绿色
toastr.success("你有新消息了!");
//警告消息提示,默认背景为橘黄色
toastr.warning("你有新消息了!");
//错误消息提示,默认背景为浅红色
toastr.error("你有新消息了!");
//带标题的消息框
toastr.success("你有新消息了!","消息提示");
//另一种调用方法
toastr["info"]("你有新消息了!","消息提示");
参数:
- positionClass
toast-top-left 顶端左边
toast-top-right 顶端右边
toast-top-center 顶端中间
toast-top-full-width 顶端,宽度铺满整个屏幕
toast-botton-right
toast-bottom-left
toast-bottom-center
toast-bottom-full-width
- closeButton:false,是否显示关闭按钮(提示框右上角关闭按钮);
- debug:false,是否为调试;
- progressBar:false,是否显示进度条(设置关闭的超时时间进度条)
- onclick,点击消息框自定义事件
- showDuration: “300”,显示动作时间
- hideDuration: “1000”,隐藏动作时间
- timeOut: “2000”,自动关闭超时时间
- extendedTimeOut: “1000”
- showEasing: “swing”,
- hideEasing: “linear”,
- showMethod: “fadeIn” 显示的方式,和jquery相同
- hideMethod: “fadeOut” 隐藏的方式,和jquery相同
2.Jquery UI—工具提示框(Tooltip)(文本辅助提示)
引入jquery.css和jquery.js
<script>
$(function() {
$( document ).tooltip();
});
</script>
内容定义在title的属性中。
3.确认或取消的提示框,
用于用户 确定才能进行的操作,比如删除操作、提交订单操作等
有两个插件(1)使用bootstrap弹出框确认取消提示框,message属性传入提示的信息,on里面注入按钮后的回调事件。
(2)使用bootbox组件,引入bootbox.js
(3)效果比较炫酷一点的提示框:sweetalert,引入sweetalert .css和sweetalert.js