弹出框/提示框插件
一、sweetalert
bootstrap的弹出框/提示框插件，比alert更美观、功能更强大功能：基本信息弹窗、带确认信息的弹窗、带输入信息的弹窗、支持ajax请求、成功失败等提示弹窗官网地址(中文):/sweetalert/git地址：/t4t5/sweetalertcdn
<link href="/sweetalert/1.1.3/sweetalert.min.css" rel="stylesheet"><script src="/sweetalert/1.1.3/sweetalert.min.js"></script>
代码
<!DOCTYPE html><html><head><title></title><link rel="stylesheet" type="text/css" href="/twitter-bootstrap/4.3.0/css/bootstrap.min.css"><link href="/sweetalert/1.1.3/sweetalert.min.css" rel="stylesheet"><script src="/jquery/3.4.0/jquery.min.js" type="text/javascript"></script><script type="text/javascript" src="/twitter-bootstrap/4.3.0/js/bootstrap.min.js"></script><script src="/sweetalert/1.1.3/sweetalert.min.js"></script></head><body><button id="submit">click</button><!--sweetalert：bootstrap的弹出框/提示框插件，比alert更美观、功能更强大功能：基本信息弹窗、带确认信息的弹窗、带输入信息的弹窗、支持ajax请求、成功失败等提示弹窗官网地址(中文):/sweetalert/git地址：/t4t5/sweetalertcdn:/sweetalert/1.1.3/sweetalert.min.css/sweetalert/1.1.3/sweetalert.min.js--><script type="text/javascript">$(function() {$("#submit").click(function(event) {/* Act on the event */// sweetAlert("哎呦……", "出错了！","error");// swal("这是一条信息！")// swal("这是一条信息！", "很漂亮，不是吗？")swal("干得漂亮！", "你点击了按钮！","success")// swal({// title: "确定删除吗？",// text: "你将无法恢复该虚拟文件！",// type: "warning",// showCancelButton: true,// confirmButtonColor: "#DD6B55",// confirmButtonText: "确定删除！",// closeOnConfirm: false// },// function(){// swal("删除！", "你的虚拟文件已经被删除。", "success");// });});})</script></body></html>
二、toastr
优点：异步、无阻塞，可以显示在不同的位置代码
<!DOCTYPE html><html><head><title></title><link rel="stylesheet" type="text/css" href="/toastr.js/latest/css/toastr.min.css"><script src="/jquery/3.4.0/jquery.min.js" type="text/javascript"></script><!-- jquery 要在toastr之前引用 --><script type="text/javascript" src="/toastr.js/latest/js/toastr.min.js"></script><script type="text/javascript">// 设置居中toastr.options.positionClass = "toast-top-center";</script></head><body><!-- 优点：异步、无阻塞，可以显示在不同的位置 --><button id="button1">异常</button><script type="text/javascript">$(function() {$('#button1').click(function () {toastr.info("121.");toastr.success("hello world.");toastr.warning("hello world.");toastr.error("hello world.");});})</script></body></html>
