SweetAlert – 替代 Alert 的漂亮的弹窗效果

发布于2017年3月10日 20:37:16

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

使用方法:

首先在头部引入以下文件

<script src="lib/sweet-alert.min.js"></script>
<link rel="stylesheet" type="text/css" href="lib/sweet-alert.css">

最基本的调用方法:

sweetAlert("Hello world!");

带错误图标的警告框:

sweetAlert("Oops...", "Something went wrong!", "error");

一个带有确认按钮的警告框,点击确认可触发动画:

sweetAlert({
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");
});

本人之前移动端的做得移动端弹窗效果都是借鉴此效果的,体验度不错,特推荐大家也用用。

SweetAlert在Github下载地址为:https://github.com/t4t5/sweetalert

发表评论