今天给大家推荐一款不错的超酷消息警告框–SweetAlert；SweetAlert是一款不需要jQuery支持的原生js提示框,风格类似bootstrap。它的提示框不仅美丽动人，并且允许自定义，支持设置提示框标题、提示类型、内容展示图片、确认取消按钮文本、点击后回调函数等。和传统的alert相比：

SweetAlert 能在页面自动居中，支持桌面环境，移动端和平板，并且高度自定义。接下来看看它的具体使用！

HTML

首先引入相应的js和css，该插件不需要jQuery插件的支持：

<link rel="stylesheet" type="text/css" href="http://sandbox.runjs.cn/uploads/rs/499/ixc5vbvz/sweetalert.css"/><script src="http://sandbox.runjs.cn/uploads/rs/499/ixc5vbvz/sweetalert.min.js"></script>

然后放置6个不同的按钮：

<div class="demo_1">基本示例：<button>点击这里</button> </div><div class="demo_2">提示成功：<button>点击这里</button> </div><div class="demo_3">提示失败：<button>点击这里</button> </div><div class="demo_4">提示确认：<button>点击这里</button> </div><div class="demo_5">定义内容：<button>点击这里</button> </div><div class="demo_6">确认输入：<button>点击这里</button> </div>

JavaScript

定义js事件：

$(function() {$(".demo_1 button").click(function() {swal("这是一个信息提示框!");});$(".demo_2 button").click(function() {swal("Good!", "弹出了一个操作成功的提示框", "success");});$(".demo_3 button").click(function() {swal("OMG!", "弹出了一个错误提示框", "error");});$(".demo_4 button").click(function() {swal({title: "您确定要删除吗？",text: "您确定要删除这条数据？",type: "warning",showCancelButton: true,closeOnConfirm: false,confirmButtonText: "是的，我要删除",confirmButtonColor: "#ec6c62"}, function() {$.ajax({url: "do.php",type: "DELETE"}).done(function(data) {swal("操作成功!", "已成功删除数据！", "success");}).error(function(data) {swal("OMG", "删除操作失败了!", "error");});});});$(".demo_5 button").click(function() {swal({title: "Good!",text: '自定义<span style="color:red">图片</span>、<a href="#">HTML内容</a>。<br/>5秒后自动关闭。',imageUrl: "images/thumbs-up.jpg",html: true,timer: 5000,showConfirmButton: false});});$(".demo_6 button").click(function() {swal({title: "输入框来了",text: "这里可以输入并确认:",type: "input",showCancelButton: true,closeOnConfirm: false,animation: "slide-from-top",inputPlaceholder: "填点东西到这里面吧"}, function(inputValue) {if (inputValue === false)return false;if (inputValue === "") {swal.showInputError("请输入!");return false}swal("棒极了!", "您填写的是: " + inputValue, "success");});});});