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="">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>

巴特西

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

最新文章

热门文章