sweetalert------一个非常萌的alert!

今天逛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>

 

posted @ 2017-08-29 14:04  彩色积雨云  阅读(1369)  评论(0)  编辑  收藏  举报