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