SweetAlert2是一款功能强大的纯Js模态消息对话框插件。SweetAlert2用于替代浏览器默认的弹出对话框,它提供各种参数和方法,支持嵌入图片,背景,HTML标签等,并提供5种内置的情景类,功能非常强大。

SweetAlert2是SweetAlert-js的升级版本,它解决了SweetAlert-js中不能嵌入HTML标签的问题,并对弹出对话框进行了优化,同时提供对各种表单元素的支持,还增加了5种情景模式的模态对话框。

安装

可以通过bower或npm来安装sweetalert2对话框插件。

1
2
bower install sweetalert2
npm install sweetalert2
 

使用方法

使用SweetAlert2对话框需要在页面中引入sweetalert2.min.css和sweetalert2.min.js文件,为了兼容IE浏览器,还需要引入promise.min.js文件。

1
2
3
4
<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()来弹出一个对话框。

1
swal('Hello world!');
 

如果要弹出一个带情景模式的对话框,可以在的第二个参数中设置。

1
swal('Oops...''Something went wrong!''error');
 

你可以通过下面的方法来处理对话框的用户交互:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
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标签。如果同时提供texthtml参数,插件将会优先使用text参数。
type null 对话框的情景类型。有5种内置的情景类型:warningerrorsuccessinfoquestion。它可以在参数对象的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的值是selectradio,你可以为它们提供选项。对象的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+

SweetAlert2模态对话框插件的github地址为:https://github.com/limonte/sweetalert2

【转载】SweetAlert2 使用的更多相关文章

  1. Crystal Clear Applied: The Seven Properties of Running an Agile Project (转载)

    作者Alistair Cockburn, Crystal Clear的7个成功要素,写得挺好. 敏捷方法的关注点,大家可以参考,太激动所以转载了. 原文:http://www.informit.com ...

  2. RTP与RTCP协议介绍(转载)

    RTSP发起/终结流媒体.RTP传输流媒体数据 .RTCP对RTP进行控制,同步.RTP中没有连接的概念,本身并不能为按序传输数据包提供可靠的保证,也不提供流量控制和拥塞控制,这些都由RTCP来负责完 ...

  3. 《Walking the callstack(转载)》

    本文转载自:https://www.codeproject.com/articles/11132/walking-the-callstack Download demo project with so ...

  4. [转载]MVVM模式原理分析及实践

    没有找到很好的MVVM模式介绍文章,简单找了一篇,分享一下.MVVM实现了UI\UE设计师(Expression Blend 4设计界面)和软件工程师的合理分工,在SilverLight.WPF.Wi ...

  5. [转载]:STM32为什么必须先配置时钟再配置GPIO

    转载来源 :http://blog.csdn.net/fushiqianxun/article/details/7926442 [原创]:我来添两句,就是很多同学(包括我)之前搞低端单片机,到了stm ...

  6. [转载]从MyEclipse到IntelliJ IDEA-让你摆脱鼠标,全键盘操作

    从MyEclipse转战到IntelliJ IDEA的经历 注转载址:http://blog.csdn.net/luoweifu/article/details/13985835 我一个朋友写了一篇“ ...

  7. TCP同步与异步,长连接与短连接【转载】

    原文地址:TCP同步与异步,长连接与短连接作者:1984346023 [转载说明:http://zjj1211.blog.51cto.com/1812544/373896   这是今天看到的一篇讲到T ...

  8. 在CentOS 7/6.5/6.4 中安装Java JDK 8(转载)

    转载在CentOS 7/6.5/6.4 中安装Java JDK 8 首先,在你的服务器上运行一下更新. yum update 然后,在您的系统上搜索,任何版本的已安装的JDK组件. rpm -qa | ...

  9. 用C#实现MD5的加密(转载)

    方法一 首先,先简单介绍一下MD5 MD5的全称是message-digest algorithm 5(信息-摘要算法,在90年代初由mit laboratory for computer scien ...

随机推荐

  1. JavaScript事件机制——细思极恐

    JavaScript事件机制,也有让人深思的东西.在一开始未深入了解,我头脑里有几个问题发出: 1. 自下而上(冒泡)事件怎么写,自上而下(捕获)又是怎么写? 2. 捕获型和冒泡型同时设置,谁生效? ...

  2. HTTP与HTTPS握手的那些事

    今天我总结了什么是HTTP三次握手,还有HTTPS握手的过程以及为什么HTTPS是安全的. 前提 在讲述这两个握手时候,有一些东西需要提前说明. HTTP与TCP/IP区别? TPC/IP协议是传输层 ...

  3. SAP 录屏BDC使用—实例

    1)  输入TCode:SHDB进入BDC录制初始界面,该界面可以实现已创建BDC Session信息的查看.删除及锁定等操作 2)  单击工具栏 Newrecording 按钮创建一个新的BDC,系 ...

  4. ABAP中的同步和异步调用

    ABAP 的 CALL FUNCTION 类似于 Java/.NET 中的本地或远程方法调用.CALL FUNCTION 可以分为四种:1. Synchronous RFC (sRFC) - 同步调用 ...

  5. JSON 转javabean 利器

    别再对着json来手写javabean啦.这个工作完全不要脑子,而且耗时. 这里给大家提供三种方式: android studio版: 万能的插件:GsonFormat 如何安装? Preferenc ...

  6. Android 中的编码与解码

    前言:今天遇到一个问题,一个用户在登录的时候,出现登录失败.但是其他用户登录都是正常的,经过调试发现登录失败的用户的密码中有两个特殊字符: * .#  . 特殊符号在提交表单的时候,出现了编码不一样的 ...

  7. Android自定义控件2--优酷菜单界面初始化

    本文开始将逐步去实现下面优酷菜单的效果: 本文地址:http://www.cnblogs.com/wuyudong/p/5912538.html,转载请注明源地址. 本文首先来实现优酷菜单界面初始化工 ...

  8. UISegmentedControl(人物简介)

    效果图 当你点击上面人物名字的时候 ,就可以随意切换人物. 这个很有趣 , 你还可以试着添加音乐播放器 .以及一些别的来完善你想做的. 好吧 , 废话不多说 , 上代码. #import " ...

  9. Virtualbox虚拟机安装CentOS6.5图文详细教程

    什么是Virtualbox? VirtualBox 是一款开源虚拟机软件(注:跟vmware差不多).VirtualBox 是由德国 Innotek 公司开发,由Sun Microsystems公司出 ...

  10. HTML5气泡悬浮框(已经加上完整文件)

    源文件链接:http://pan.baidu.com/s/1pKHlNSn 设计气泡悬浮框 1.在网页设计中,气泡悬浮框常常用于页面中为某些对象显示提示信息,恰当地使用气泡悬浮框能够使网页布局更加完美 ...