漂亮的提示框SweetAlert使用教程

简介: 一、简介    所使用过的弹出框插件,SweetAlert是最好用的。发展至今,已经有两个版本,一个是原版 t4t5/sweetalert , 一个是分支版 limonte/sweetalert2 ,更新相对较快,听说更好看。

一、简介

   所使用过的弹出框插件,SweetAlert是最好用的。发展至今,已经有两个版本,一个是原版 t4t5/sweetalert , 一个是分支版 limonte/sweetalert2 ,更新相对较快,听说更好看。

  SweetAlert是一款不需要jQuery支持的原生js提示框,风格类似bootstrap。现在都已经升级到2.0

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

  使用非常简单,示例如下

  

swal("Hello world!");

swal("Here's the title!", "...and here's the text!"); //包含子标题

swal("Good job!", "You clicked the button!", "success");//包含图标

 

二、t4t5/sweetalert

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

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

中文:

http://mishengqiang.com/sweetalert/

http://mishengqiang.com/sweetalert/

http://www.sucaihuo.com/jquery/12/1241/demo/

文档中没有浏览器兼容提示,只能自己测试了

三、limonte/sweetalert2

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

在线实例:https://limonte.github.io/sweetalert2 

中文:http://www.jq22.com/jquery-info8169

  

浏览器兼容

IE11* Edge Chrome Firefox Safari Opera Android Browser* UC Browser*
:white_check_mark: :white_check_mark: :white_check_mark: :white_check_mark: :white_check_mark: :white_check_mark: :white_check_mark: :white_check_mark:

 

 

* ES6 Promise polyfill should be included, see usage example.

SweetAlert2 不再支持ie10及以下版本

 

相关文章
|
6月前
|
移动开发 JavaScript 小程序
uniapp中间加号点击弹窗怎么实现?完整教程
uniapp中间加号点击弹窗怎么实现?完整教程
518 1
uniapp中间加号点击弹窗怎么实现?完整教程
|
6月前
uniapp点击图片预览功能?
uniapp点击图片预览功能?
|
Android开发
autojs按钮不可点击
牙叔教程 简单易懂
1100 0
autojs普通版控制台美化
autojs普通版控制台美化
876 0
|
6月前
|
API
uniapp点击图片放大预览
uniapp点击图片放大预览
376 0
|
监控 Serverless 持续交付
我们把“高血压”小游戏真正做到了不用下载,点击即玩!!!
我们把“高血压”小游戏真正做到了不用下载,点击即玩!!!
|
小程序 开发者
微信小程序系列——点击图片放大预览
微信小程序系列——点击图片放大预览
|
小程序
微信小程序实用工具——渐变色按钮(一)
微信小程序实用工具——渐变色按钮(一)
|
小程序
微信小程序实用工具——渐变色按钮(二)
微信小程序实用工具——渐变色按钮(二)
|
Android开发
autojs控制台美化
牙叔教程 简单易学 使用场景 自定义控制台
760 0