关于SweetAlert

http://mishengqiang.com/sweetalert/
SweetAlert是由Tristan Edwards创建的,你可以关注他的Twitter或者Dribbble更新和其它酷的项目!
如果你想要添加新特性,欢迎你在GitHub上fork SweetAlert项目!
这个SweetAlert
我觉得她很酷阿,好东西一直藏着也不是个事,一直都很喜欢所以分享了出来~

馒头屑

那么……它都能做什么呢?

让我们来比较看一下错误消息的显示。第一个使用了内置的alert,第二个使用了sweetAlert。

默认的Alert


alert('哎呦……出错了!');

来自SweetAlert


sweetAlert('哎呦……', '出错了!','error');

示例

在这些实例中,我们使用了简称函数swal调用sweetAlert。

基本信息弹框


swal('这是一条信息!');

标题与文本的信息弹窗


swal('这是一条信息!', '很漂亮,不是吗?');

成功信息弹窗!


swal('干得漂亮!', '你点击了按钮!','success');

警告信息弹窗,“确认”按钮带有一个函数……


swal({
  title: '确定删除吗?',
  text: '你将无法恢复该虚拟文件!',
  type: 'warning',
  showCancelButton: true,
  confirmButtonColor: '#DD6B55',
  confirmButtonText: '确定删除!',
  closeOnConfirm: false
},
function(){
  swal('删除!', '你的虚拟文件已经被删除。', 'success');
});

…… 给函数传入参数,"取消"按钮也可以执行。


swal({
  title: '确定删除吗?',
  text: '你将无法恢复该虚拟文件!',
  type: 'warning',
  showCancelButton: true,
  confirmButtonColor: '#DD6B55',
  confirmButtonText: '确定删除!',
  cancelButtonText: '取消删除!',
  closeOnConfirm: false,
  closeOnCancel: false
},
function(isConfirm){
  if (isConfirm) {
    swal('删除!', '你的虚拟文件已经被删除。',
'success');
  } else {
    swal('取消!', '你的虚拟文件是安全的:)',
'error');
  }
});

配置

参数
默认值
描述
title null (required) 弹窗的标题。可以通过对象的”title”属性或第一个参数进行传递。
text null 弹窗的描述。可以通过对象的”text”属性或第二个参数进行传递。
type null 弹窗的类型。SweetAlert有四个内置类型,可以展示相应的图标动画: "warning","error", "success" and "info"。你也可以设置为"input"类型变成输入弹窗。可以通过对象的”type”属性或第三个参数进行传递。
allowEscapeKey true 如果设置为true,用户可以通过按下Escape键关闭弹窗。
customClass null 弹窗的自定义样式,可以通过对象的"customClass"属性进行添加。
allowOutsideClick false 如果设置为true,用户点击弹窗外部可关闭弹窗。
showCancelButton false 如果设置为true,“取消”按钮将会显示,用户点击取消按钮会关闭弹窗。
showConfirmButton true 如果设置为false,“确认”按钮将会隐藏。为了良好的用户体验,最好你设置了定时关闭或者allowOutsideClick为true时才将该参数设置为false。
confirmButtonText "OK" 使用该参数来修改“确认”按钮的显示文本。如果showCancelButton设置为true,确定按钮的显示文本将会自动使用“Confirm”而不是“OK”。
confirmButtonColor "#AEDEF4" 使用该参数来修改“确认”按钮的背景颜色(必须是十六进制值)。
cancelButtonText "Cancel" 使用该参数来修改“取消”按钮的显示文本。
closeOnConfirm true 设置为false,用户点击“确认”按钮后,弹窗会继续保持打开状态。如果点击“确认”按钮后需要打开另一个SweetAlert弹窗,这是非常有用的。
closeOnCancel true 这和closeOnConfirm的功能相似,只不过这个是“取消”按钮。
imageUrl null 为弹窗添加一个自定义的图标。这个参数是一个字符串图片路径。
imageSize "80x80" 如果设置了imageUrl,你可以使用像素(px)指定图片大小来描述你想要多大的图标。在一个字符串中使用“x”来分割两个值,第一个值是宽度,第二值是高度。
timer null 自动关闭弹窗的定时器。单位为毫秒(ms)。
html false 如果你设置为true,参数title和参数text的值将会被html解析显示而不是纯文本。(如果你担心被XSS攻击那就设置为false。)
animation true 如果设置为false, 弹窗的动画将会被禁用。其它字符串值:pop(这是animation设置为true时的默认值), slide-from-top, slide-from-bottom
inputType "text" 当使用type: "input"时,该参数用来改变输入的类型(例如:如果你想让用户输入密码,这可能是有用的)。
inputPlaceholder null 当使用输入类型时,你可以使用placeholder来帮助用户明白应该输入什么内容。
inputValue null 当使用type: "input"时,你希望在输入前展示默认值时,可以指定一个默认值。
showLoaderOnConfirm false 设置为true,当处于加载时会禁用确认按钮并显示为加载样式。

方法

方法
示例
描述
setDefaults swal.setDefaults({ confirmButtonColor: '#0000' }); 当调用SweetAlert时,如果你使用很多相同的设置,您可以在程序的开始使用setDefaults设置它们!
close swal.close(); 通过编程的方式将当前打开的SweetAlert弹窗关闭。
showInputError swal.showInputError("Invalid email!"); 如果用户输入的数据是错误的,在验证输入字段后会显示一个错误的信息。
enableButtons, disableButtons swal.disableButtons(); 禁用或启用用户点击取消按钮和确认按钮。

想要更多

前往SweetAlert

获取

引用必要的文件初始化插件:

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

获取SweetAlert