今天逛github的时候发现一个非常萌的alert，比IE和各大浏览器的原alert美多惹。
github项目地址：https://github.com/t4t5/sweetalert
通过git clone到本地
项目本身也有一个非常Nice的说明文档，跟着操作就能看懂各种做好的萌萌哒的alert了。
参考：https://www.ludu.co/lesson/how-to-use-sweetalert
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>index1</title> <script type="text/javascript" src="sweetalert.min.js"></script> <link rel="stylesheet" href="sweetalert.css"> </head> <body> <script> //sweetAlert("Hello world!") sweetAlert({ title: "Oops!", text: "Something went wrong on the page!", type: "error" }); </script> </body> </html>
配合jQuery还可以设置其他的alert哦
<button class="delete-photo" data-photo-id="56">Delete photo</button> <script> $('button.delete-photo').click(function() { var photoId = $(this).attr("data-photo-id"); deletePhoto(photoId); }); function deletePhoto(photoId) { swal({ title: "Are you sure?", text: "Are you sure that you want to delete this photo?", type: "warning", showCancelButton: true, closeOnConfirm: false, confirmButtonText: "Yes, delete it!", confirmButtonColor: "#ec6c62" }, function() { $.ajax({ url: "/api/photos/" + photoId, type: "DELETE" }) .done(function(data) { swal("Deleted!", "Your file was successfully deleted!", "success"); }) .error(function(data) { swal("Oops", "We couldn't connect to the server!", "error"); }); }); } </script>
