SweetAlert2是一款功能强大的纯Js模态消息对话框插件。SweetAlert2用于替代浏览器默认的弹出对话框，它提供各种参数和方法，支持嵌入图片，背景，HTML标签等，并提供5种内置的情景类，功能非常强大。
SweetAlert2是SweetAlert-js的升级版本，它解决了SweetAlert-js中不能嵌入HTML标签的问题，并对弹出对话框进行了优化，同时提供对各种表单元素的支持，还增加了5种情景模式的模态对话框。
安装
可以通过bower或npm来安装sweetalert2对话框插件。
bower install sweetalert2
npm install sweetalert2
使用方法
使用SweetAlert2对话框需要在页面中引入sweetalert2.min.css和sweetalert2.min.js文件，为了兼容IE浏览器，还需要引入promise.min.js文件。
基本使用
最基本的使用方法是通过swal()来弹出一个对话框。
swal('Hello world!');
如果要弹出一个带情景模式的对话框，可以在的第二个参数中设置。
swal('Oops...', 'Something went wrong!', 'error');
你可以通过下面的方法来处理对话框的用户交互：
swal({
title: 'Are you sure?',
text: 'You will not be able to recover this imaginary file!',
type: 'warning',
showCancelButton: true,
confirmButtonText: 'Yes, delete it!',
cancelButtonText: 'No, keep it',
}).then(function(isConfirm) {
if (isConfirm === true) {
swal(
'Deleted!',
'Your imaginary file has been deleted.',
'success'
);
} else if (isConfirm === false) {
swal(
'Cancelled',
'Your imaginary file is safe :)',
'error'
);
} else {
// Esc, close button or outside click
// isConfirm is undefined
}
});
swal(...)会返回一个Promise对象，该Promise对象中then方法中的isConfirm参数的含义如下：
true：代表Confirm(确认)按钮。
false：代表Cancel(取消)按钮。
undefined：代表按下Esc键，点击取消按钮或在对话框之外点击。
模态对话框的类型
sweetalert2提供了5种情景模式的对话框。
配置参数
参数
默认值
描述
title
null
模态对话框的标题。它可以在参数对象的title参数中设置，也可以在swal()方法的第一个参数设置。
text
null
模态对话框的内容。它可以在参数对象的text参数中设置，也可以在swal()方法的第二个参数设置。
html
null
对话框中的内容作为HTML标签。如果同时提供text和html参数，插件将会优先使用text参数。
type
null
对话框的情景类型。有5种内置的情景类型：warning，error，success，info和question。它可以在参数对象的type参数中设置，也可以在swal()方法的第三个参数设置。
customClass
null
模态对话框的自定义class类。
animation
true
如果设置为false，对话框将不会有动画效果。
allowOutsideClick
true
是否允许点击对话框外部来关闭对话框。
allowEscapeKey
true
是否允许按下Esc键来关闭对话框。
showConfirmButton
true
是否显示“Confirm(确认)”按钮。
showCancelButton
false
是否显示“Cancel(取消)”按钮。
confirmButtonText
"OK"
确认按钮上的文本。
cancelButtonText
"Cancel"
取消按钮上的文本。
confirmButtonColor
"#3085d6"
确认按钮的颜色。必须是HEX颜色值。
cancelButtonColor
"#aaa"
取消按钮的颜色。必须是HEX颜色值。
confirmButtonClass
null
确认按钮的自定义class类。
cancelButtonClass
null
取消按钮的自定义class类。
buttonsStyling
true
为按钮添加默认的swal2样式。如果你想使用自己的按钮样式，可以将该参数设置为false。
reverseButtons
false
如果你想反向显示按钮的位置，设置该参数为true。
showLoaderOnConfirm
false
设置为true时，按钮被禁用，并显示一个在加载的进度条。该参数用于AJAX请求的情况。
preConfirm
null
在确认之前执行的函数，返回一个Promise对象。
imageUrl
null
为模态对话框自定义图片。指向一幅图片的URL地址。
imageWidth
null
如果设置了imageUrl参数，可以为图片设置显示的宽度，单位像素。
imageHeight
null
如果设置了imageUrl参数，可以为图片设置显示的高度，单位像素。
imageClass
null
自定义的图片class类。
timer
null
自动关闭对话框的定时器，单位毫秒。
width
500
模态窗口的宽度，包括padding值(box-sizing: border-box)。
padding
20
模态窗口的padding内边距。
background
"#fff"
模态窗口的背景颜色。
input
null
表单input域的类型，可以是"text", "email", "password", "textarea", "select", "radio", "checkbox" 和 "file"。
inputPlaceholder
""
input域的占位符。
inputValue
""
input域的初始值。
inputOptions
{} 或 Promise
如果input的值是select或radio，你可以为它们提供选项。对象的key代表选项的值，value代表选项的文本值。
inputAutoTrim
true
是否自动清除返回字符串前后两端的空白。
inputValidator
null
是否对input域进行校验，返回Promise对象。
inputClass
null
自定义input域的class类。
你可以使用swal.setDefaults(customParams)方法来覆盖默认的参数，customParams是一个对象。
方法
方法
描述
swal.setDefaults({Object})
当你在使用SweetAlert2时有大量的自定义参数，可以通过swal.setDefaults({Object})方法来将它们设置为默认参数。
swal.resetDefaults()
重置设置的默认值。
swal.queue([Array])
提供一个数组形式的SweetAlert2参数，用于显示多个对话框。对话框将会一个接一个的出现。
swal.close()
或 swal.closeModal()
以编程的方式关闭当前打开的SweetAlert2对话框。
swal.enableButtons()
确认和关闭按钮可用。
swal.disableButtons()
禁用确认和关闭按钮。
swal.enableLoading()
或 swal.showLoading()
禁用按钮并显示加载进度条。通常用于AJAX请求。
swal.disableLoading()
或 swal.hideLoading()
隐藏进度条并使按钮可用。
swal.clickConfirm()
以编程的方式点击确认按钮。
swal.clickCancel()
以编程的方式点击取消按钮。
swal.showValidationError(error)
显示表单校验错误信息。
swal.resetValidationError()
隐藏表单校验错误信息。
swal.enableInput()
使input域可用。
swal.disableInput()
禁用input域。
浏览器兼容
SweetAlert2可以工作在所有的现代浏览器中：
IE: 10+(需要引入Promise文件)
Microsoft Edge: 12+
Safari: 4+
Firefox: 4+
Chrome 14+
Opera: 15+
js插件---弹出层sweetalert2(总结)
js插件---弹出层sweetalert2(总结) 一.总结 一句话总结: sweetalert2的效果非常好,效果比较Q萌,移动端适配也比较好,感觉比layer.js效果好点 1.SweetAler ...
Angular2入门系列教程7-HTTP(一)-使用Angular2自带的http进行网络请求
上一篇:Angular2入门系列教程6-路由(二)-使用多层级路由并在在路由中传递复杂参数 感觉这篇不是很好写,因为涉及到网络请求,如果采用真实的网络请求,这个例子大家拿到手估计还要自己写一个web ...
Angular2入门系列教程6-路由(二)-使用多层级路由并在在路由中传递复杂参数
上一篇:Angular2入门系列教程5-路由(一)-使用简单的路由并在在路由中传递参数 之前介绍了简单的路由以及传参,这篇文章我们将要学习复杂一些的路由以及传递其他附加参数.一个好的路由系统可以使我们 ...
Angular2入门系列教程5-路由(一)-使用简单的路由并在在路由中传递参数
上一篇:Angular2入门系列教程-服务 上一篇文章我们将Angular2的数据服务分离出来,学习了Angular2的依赖注入,这篇文章我们将要学习Angualr2的路由 为了编写样式方便,我们这篇 ...
Angular2入门系列教程4-服务
上一篇文章 Angular2入门系列教程-多个组件,主从关系 在编程中,我们通常会将数据提供单独分离出来,以免在编写程序的过程中反复复制粘贴数据请求的代码 Angular2中提供了依赖注入的概念,使得 ...
Angular2入门系列教程1-使用Angular-cli搭建Angular2开发环境
一直在学Angular2,百忙之中抽点时间来写个简单的教程. 2016年是前端飞速发展的一年,前端越来越形成了(web component)组件化的编程模式:以前Jquery通吃一切的田园时代一去不复 ...
wepack+sass+vue 入门教程(三)
十一.安装sass文件转换为css需要的相关依赖包 npm install --save-dev sass-loader style-loader css-loader loader的作用是辅助web ...
wepack+sass+vue 入门教程(二)
六.新建webpack配置文件 webpack.config.js 文件整体框架内容如下,后续会详细说明每个配置项的配置 webpack.config.js直接放在项目demo目录下 module.e ...
wepack+sass+vue 入门教程(一)
一.安装node.js node.js是基础,必须先安装.而且最新版的node.js,已经集成了npm. 下载地址 node安装,一路按默认即可. 二.全局安装webpack npm install ...
随机推荐
非root用户的SSH免密登录
在网上找到的教程一般是这样说的 cd ~/.ssh/ # 若没有该目录,请先执行一次ssh localhost ssh-keygen -t rsa # 会有提示,都按回车就可以 cat id_rsa. ...
反射的一些用法(WP8.1下)
我初步的理解:反射就是动态调用(dll)类. 比如某个dll有一个类,通过反射就可以知道它里面属性.方法,就可以实现调用. 确实,dll可以直接引用,但是如果遇到这种情况: 添加.删除功能同属一个Dl ...
CSipSimple结构浅析
最近做一个VOIP的项目,调研了CSipSimple.都说CSipSimple结构清晰,但是代码下下来看了一下,还是一头雾水,不知从何看起.于是想到从最简单的打电话开始,借助网上一篇博文"C ...
[转]MySQL中存储过程权限问题
MySQL中以用户执行存储过程的权限为EXECUTE 比如我们在名为configdb的数据库下创建了如下存储过程,存储过程的定义者为user_admin use configdb; drop proc ...
PAT-乙级-1024. 科学计数法 (20)
1024. 科学计数法 (20) 时间限制 100 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 HOU, Qiming 科学计数法是科学家用来表示很 ...
如何制作一个完美的全屏视频H5
写在前面的话: 最近一波H5广告火爆整个互联网圈,身为圈内人,我们怎能 不! 知!道! :( 嘘!真不知道的也继续看下去,有收获 ↓ ) So,搞懂这个并不难. 这篇文章将带你从头到尾了解H5 ...
OSG开源教程(转)
例:geom->addPrimitiveSet(new osg::DrawArrays(osg::PrimitiveSet::QUADS,0,4)); 来指定要利用这些数据生成一个怎么样的形状. ...
CentOS7部分调优命令
一般CentOS的磁盘空间占用最大的就是日志文件,日志文件主要保存在./log目录里,因此通过以下命令可以检查目录的大小. du -ah --max-depth=1 du命令的一些常用参数: -a或- ...
linux常用命令(个人总结)
1.快捷键: ctrl + l --------------------清屏 ctrl + c --------------------退出当前命令 ctrl + ...
jQuery漏洞
1.使用jQuery.append().jQuery.html()方法时,如果其中内容包含脚本而没有经过任何处理的话,会执行它. 2.版本低于1.7的jQuery过滤用户输 ...
549
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
