SweetAlert – 替代 Alert 的漂亮的提示效果

Sweet Alert 是一个替代传统的 JavaScript Alert 的漂亮提示效果。SweetAlert 自动居中对齐在页面中央，不管您使用的是台式电脑，手机或平板电脑看起来效果都很棒。另外提供了丰富的自定义配置选择，可以灵活控制。

示例

A basic message

• swal("Here's a message!")

• A title with a text under 

  swal("Here's a message!", "It's pretty, isn't it?")

• A success message!

• 
   

  swal("Good job!", "You clicked the button!", "success")

• A warning message, with a function attached to the "Confirm"-button... 

  swal({   title: "Are you sure?",   text: "You will not be able to recover this imaginary file!",   type: "warning",   showCancelButton: true,   confirmButtonColor: "#DD6B55",   confirmButtonText: "Yes, delete it!",   closeOnConfirm: false }, function(){   swal("Deleted!", "Your imaginary file has been deleted.","success"); });

• ... and by passing a parameter, you can execute something else for "Cancel 

  swal({   title: "Are you sure?",   text: "You will not be able to recover this imaginary file!",   type: "warning",   showCancelButton: true,   confirmButtonColor: "#DD6B55",   confirmButtonText: "Yes, delete it!",   cancelButtonText: "No, cancel plx!",   closeOnConfirm: false,   closeOnCancel: false }, function(isConfirm){   if (isConfirm) {     swal("Deleted!", "Your imaginary file has been deleted.","success");   } else {     swal("Cancelled", "Your imaginary file is safe :)", "error");   } });

• A message with a custom icon 

  swal({   title: "Sweet!",   text: "Here's a custom image.",   imageUrl: "images/thumbs-up.jpg" });

• An HTML message 

  swal({   title: "HTML <small>Title</small>!",   text: "A custom <span style="color:#F8BB86">html<span> message.",   html: true });

• A message with auto close timer 

  swal({   title: "Auto close alert!",   text: "I will close in 2 seconds.",   timer: 2000,   showConfirmButton: false });

• A replacement for the "prompt" function 

  swal({   title: "An input!",   text: "Write something interesting:",   type: "input",   showCancelButton: true,   closeOnConfirm: false,   animation: "slide-from-top",   inputPlaceholder: "Write something" }, function(inputValue){   if (inputValue === false) return false;      if (inputValue === "") {     swal.showInputError("You need to write something!");     return false   }      swal("Nice!", "You wrote: " + inputValue, "success"); });

• With a loader (for AJAX request for example) 

  swal({   title: "Ajax request example",   text: "Submit to run ajax request",   type: "info",   showCancelButton: true,   closeOnConfirm: false,   showLoaderOnConfirm: true, }, function(){   setTimeout(function(){     swal("Ajax request finished!");   }, 2000); });

• You can also change the theme of SweetAlert! 

  <link rel="stylesheet" type="text/css"href="dist/sweetalert.css"> <link rel="stylesheet" type="text/css"href="themes/twitter.css">

下载和安装

$ bower install sweetalert

$ npm install sweetalert

1. 插件引用必要的文件:

   <script src="dist/sweetalert.min.js"></script> <link rel="stylesheet" type="text/css" href="dist/sweetalert.css">

2. 在页面加载之后，调用给sweetalert功能

   swal({   title: "Error!",   text: "Here's my error message!",   type: "error",   confirmButtonText: "Cool" });

SweetAlert相关API

参数	描述	默认值
title	提示框标题	-
text	提示内容	-
type	提示类型，有：success（成功），error（错误），warning（警告），input（输入）。	-
showCancelButton	是否显示“取消”按钮。	-
animation	提示框弹出时的动画效果，如slide-from-top（从顶部滑下）等	-
html	是否支持html内容。	-
timer	设置自动关闭提示框时间（毫秒）。	-
showConfirmButton	是否显示确定按钮。	-
confirmButtonText	定义确定按钮文本内容。	-
imageUrl	定义弹出框中的图片地址。	-