漂亮的提示框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及以下版本

 

相关文章
|
JavaScript
vue element plus TimeSelect 时间选择
vue element plus TimeSelect 时间选择
770 0
|
前端开发 API
vue3+TS实战中Dialog弹窗封装复用的技巧
Dialog弹窗在后台管理系统中是使用频率非常高的组件,添加和修改数据基本都会用到,本文就讲讲在vue3和ts的项目中如何封装Dialog组件,实现代码高复用
4004 0
vue3+TS实战中Dialog弹窗封装复用的技巧
|
安全 Java 关系型数据库
深入探究Python的多线程与异步编程:实战与最佳实践
【2月更文挑战第1天】 深入探究Python的多线程与异步编程:实战与最佳实践
|
缓存 应用服务中间件 网络安全
Nginx 防止DDOS攻击
分布式拒绝服务攻击(DDoS)指的是通过多台机器向一个服务或者网站发送大量看似合法的数据包使其网络阻塞、资源耗尽从而不能为正常用户提供正常服务的攻击手段。
3331 0
|
8月前
|
SQL Java 数据库
【MyBatis-Plus】Spring Boot + MyBatis-Plus 进行各种数据库操作(附完整 CRUD 项目代码示例)
本文详解Spring Boot集成MyBatis-Plus全流程:从依赖引入、数据源配置、Mapper扫描到分页/乐观锁/逻辑删除等核心插件配置;涵盖BaseMapper基础CRUD、LambdaQueryWrapper条件查询、Service层封装、自定义XML多表关联及批量优化实践,附完整可运行示例。
1444 1
|
8月前
|
安全 开发工具 git
【Git】Git 系统性使用指南(内含《核心Git命令速查表》)
这是一份全面、实用的Git系统性指南,涵盖基础配置、日常操作、分支管理、远程协作、撤销回退、标签与高级命令(如rebase、cherry-pick、bisect等),附带速查表、规范建议和最佳实践,适合开发者日常参考、团队协作及面试复习。
1939 3
|
数据采集 存储 算法
高并发爬虫的限流策略:aiohttp实现方案
高并发爬虫的限流策略:aiohttp实现方案
|
存储 安全 Java
Spring Security中Token存储与会话管理:解析与实践
Spring Security中Token存储与会话管理:解析与实践
1426 103
|
前端开发 JavaScript 容器
使用echarts遇到的问题及解决
使用echarts遇到的问题及解决
1488 0