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

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

超文本标记语言

首先引入相应的射流研究…和css，该插件不需要jQuery插件的支持：

链接rel='样式表type=' text/CSS ' href=' http://沙盒。runjs。cn/uploads/RS/499/IX C5 vbvz/sweet alert。CSS '/脚本src=' http :http://沙箱。runjs。cn/uploads/RS/499/IX C5 vbvz/sweet alert。量滴js '/脚本然后放置6个不同的按钮：

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

定义射流研究…事件：

$(function() {$(').演示_1按钮')。单击(function() {swal('这是一个信息提示框!');});$('.演示_2按钮')。单击(函数(){swal('很好！', '弹出了一个操作成功的提示框，'成功');});$('.演示_3按钮')。单击(function() {swal('OMG！', '弹出了一个错误提示框，'错误');});$('.演示_4按钮')。click(function(){ swal({ title : ')您确定要删除吗？'，text: '您确定要删除这条数据？',键入： '警告，showCancelButton:为真，closeOnConfirm:为假，confirmButtonText: '是的，我要删除，confirm button color : ' # ec6c 62 ' }，function() {$ .ajax({url: 'do.php '，type: 'DELETE'}).完成（函数（数据){swal('操作成功！', '已成功删除数据！','成功');}).错误（函数（数据){swal('OMG '，'删除操作失败了！','错误');});});});$('.演示_5按钮')。点击（函数(){swal({title: '很好！text: '自定义span style='color:red '图片/span、a href='#'HTML内容/a .br/5秒后自动关闭，imageurl : ' images/竖起大拇指。jpg '，html: true，timer: 5000，showconfirm按钮： false })；});$('.演示_6按钮')。click(function(){ swal({ title : ')输入框来了，text: '这里可以输入并确认' : ',输入： '输入，显示取消按钮：为真，关闭确认：为假，动画： '从顶部滑动，输入占位符： '填点东西到这里面吧},函数(输入值){ if(输入值===false)返回假的；if(InputValue==' '){ swal。' showInputError('请输入!');返回false}swal('棒极了!', '您填写的是： ' inputValue，' success ')；});});});