SweetAlert_ 一个漂亮的弹窗

  • A+
所属分类:其他教程

如果你时常浏览博客网站,偶尔会看见这样一个漂亮的弹窗提示框。

SweetAlert_ 一个漂亮的弹窗

而这个弹窗提示框,是基于 SweetAlert。

 

SweetAlert 简介:

SweetAlert 是一款不需要 jQuery 支持的原生 js 提示框,风格类似 bootstrap。SweetAlert 发展至今,已经有两个版本,一个是原版 t4t5/sweetalert , 一个是分支版 limonte/sweetalert2。

不得不说,SweetAlert 这个提示框真的不错,不仅美丽动人,并且允许自定义,支持设置提示框标题、提示类型、内容展示图片、确认取消按钮文本、点击后回调函数等。

使用起来也是非常的简单。

例如:

  1. swal({
  2.   text: "Hello world!",
  3. });

 

t4t5/SweetAlert:

Github 地址:https://github.com/t4t5/sweetalert

官方文档: https://sweetalert.js.org/docs/

中文:http://mishengqiang.com/sweetalert/

SweetAlert_ 一个漂亮的弹窗

 

limonte/SweetAlert2

github 地址:https://github.com/limonte/sweetalert2

中文:http://mishengqiang.com/sweetalert2/

SweetAlert_ 一个漂亮的弹窗

在中文版网站上可以看到,SweetAlert2 分别提供了国内和国外的 CDN,

注意:SweetAlert2 不再支持 ie10 及以下版本

 

今天发现网站加载异常缓慢,原来是引用 SweetAlert 的 cdn.bootcss.com 出现了问题,赶紧把 js 和 css 本地化。

 

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: