SweetAlert2强大的纯Js模态消息对话框插件

简要教程

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种情景模式的对话框。

配置参数

方法

浏览器兼容

SweetAlert2可以工作在所有的现代浏览器中：

• IE: 10+（需要引入Promise文件）

• Microsoft Edge: 12+

• Safari: 4+

• Firefox: 4+

• Chrome 14+

• Opera: 15+