插件描述：SweetAlertjs的升级版本，支持嵌入图片，背景，HTML标签等并提供5种内置的情景类，功能非常强大。
简要教程
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文件。
<link rel="stylesheet" type="text/css" href="path/to/sweetalert2/dist/sweetalert2.min.css"> <script src="path/to/sweetalert2/dist/sweetalert2.min.js"></script> <!-- for IE support --> <script src="path/to/es6-promise/promise.min.js"></script>
基本使用
最基本的使用方法是通过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 | "#ccc" | 取消按钮的颜色。必须是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" | "#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({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+
PREVIOUS:
NEXT:
相关插件-对话框,工具提示
讨论这个项目（38）回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约
Ｋitty.のバガ 0
2021/3/18 15:04:23
图片大小调整 不了啊。几个方法没有用
swal({
title: "识别二维码关注公众号后",
allowOutsideClick: false,
allowEscapeKey: false,
confirmButtonText: "我已关注",
imageUrl: "https://www.XXXXXXXX.com/uploadfile/qrcode/qxrxqrcode.jpg",
imageWidth: "500px",
imageHeight: "1000px",
imageClass: "sweetAlertImage"
},
function() {});
回复
预＆逝去 0
2019/9/19 10:46:18
-
sweetalert2.all.js:2851 Uncaught TypeError: Cannot read property 'constructor' of undefined
一直提示这个是怎么回事
预＆逝去0
2019/9/19 10:51:05
swal.fire({
title: "站点编号错误",
text: "未找到编号站点，请确认后重试",
type: 'error',
timer: 2000,
buttons: false,
showConfirmButton: false,
});加个fire就可以了。这是必须加的吗？我是菜鸟。求大神
安然。 0
2018/9/4 16:45:44
-
这个 sweetalert2 的窗体宽高怎么设置 我的为什么会是全屏
去属于0
2019/3/8 11:09:51
-
在css里有width和height属性吧
思念，流年 0
2018/8/16 9:22:16
-
字体好大，能设置字体大小吗
.1
2019/3/12 17:25:12
-
可以的，它的标题是用的h2标签包裹的。你在sweetalert2.min.css里面去修改你想要的大小。
2yang丶 0
2018/7/26 17:54:03
-
无论点确定还是取消都执行不了后面的方法，怎么回事
愤怒～mg天空1
2018/10/25 18:20:29
在控制台你会发现isconfirm是一个对象且属性为value。包括你点击取消后返回的对象是dismiss而不是isconfirm。比着猜想问题是什么控制台是一个很好发现问题的方法，多思考就行。希望能帮到你
if (isConfirm.value === true) {
swal(
'd!',
'Your imaginary file has been d.',
'success'
);
} else {
swal(
'Cancelled',
'Your imaginary file is safe :)',
'error'
);
}
愤怒～mg天空1
2018/10/25 18:25:46
-
我纠正一点dismiss是属性else if(isConfirm.dismiss==='cancel')
H【?_?】# 1
2018/5/28 15:10:47
-
修复第一次打开不居中问题
1.修改 sweetalert2.js 里面的 getTopMargin() 方法
2.将：var height = elem.clientHeight;
3.改成：var height = elem;
JQLover0
2018/7/20 10:09:44
-
感谢~
Tempest_ 0
2018/4/18 17:36:53
-
包里只有es6-promise.min.js文件没有promise.min.js文件 ； 已经引用了es6-promise.min.js； 在ie11中还是样式是错乱的。插件的压面直接在ie11中打开也是错乱的。大姐有没有解决办法？
∑Hello0
2019/4/30 15:58:42
-
<!-- Include a polyfill for ES6 Promises (optional) for IE11 -->
‘’<s c r i p t src="https://cdn.jsdelivr.net/npm/promise-polyfill@8/dist/polyfill.js"></script>‘’
😃
- 😀
- 😉
- 😥
- 😵
- 😫
- 😘
- 😡
- 👍
- 🌹
- 👏
- 🍺
- 🍉
- 🌙
- ⭐
- 💖
- 💔
😃
取消回复
- 😀
- 😉
- 😥
- 😵
- 😫
- 😘
- 😡
- 👍
- 🌹
- 👏
- 🍺
- 🍉
- 🌙
- ⭐
- 💖
- 💔
