漂亮的提示框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点击图片预览功能?
|
Web App开发 自然语言处理 安全
文字点选行为验证码(KgCaptcha快速入门)
凯格行为验证码 - KgCaptcha,采用业界通用的API接口方式,对接轻松简单,即可享受带来的产品服务能力。自定义样式及风控等级,完全个性化的设置,与你的应用完美融合。自由定义验证场景、安全策略、素材管理、自定义底图、拼图素材、验证模式、验证偏好、背景图片、Logo、跳转链接。定制需求由业务专家制定解决方案,支持私有化部署、多语言切换。
551 0
文字点选行为验证码(KgCaptcha快速入门)
autojs普通版控制台美化
autojs普通版控制台美化
878 0
|
Android开发
autojs按钮不可点击
牙叔教程 简单易懂
1102 0
|
XML Android开发 数据格式
简单使用BottomSheetBehavior实现底部弹窗
这次带来的是BottomSheetBehavior的简单使用,BottomSheetBehavior是Android Support Library23.2中引入的,它可以轻松实现底部动作条功能。
4485 0
|
6月前
|
API
uniapp点击图片放大预览
uniapp点击图片放大预览
379 0
|
小程序 开发者
微信小程序系列——点击图片放大预览
微信小程序系列——点击图片放大预览
|
小程序
微信小程序实用工具——渐变色按钮(一)
微信小程序实用工具——渐变色按钮(一)
|
Android开发
autojs控制台美化
牙叔教程 简单易学 使用场景 自定义控制台
760 0