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. 关于处理addGiftmoneyAction接口报错问题的总结

    昨天UniUser中AddGiftmoneyAction接口在被调用时抛出异常,曾哥让我来解决这个问题,虽然最后查出是路径问题,但是由于解决问题 的思路不够清晰,导致浪费了大量的时间和精力,也没有给出 ...

  2. 解决html表格中内容超出不强制换行和超出宽度自动隐藏并显示省略号

    在表格布局中经常会遇到因为表格内容长短的变化导致布局混乱的情况,这个时候我们可能会有为了布局稳定把单元格宽度写死的情况:但是我们设置了宽度却发现超出了宽度之后会自动变大,用css定义元素的overfl ...

  3. Git本地仓库

    原文:http://www.cnblogs.com/wilber2013/p/4189920.html Git基本概念 在Git中,我们将需要进行版本控制的文件目录叫做一个仓库(repository) ...

  4. Oracle12C相关

    1.jar包安装到MVN本地库 mvn install:install-file -DgroupId=com.oracle -DartifactId=ojdbc6 -Dversion=11.2.0.1 ...

  5. Android 加载大图片到内存

    本文演示android中图片加载到内存 首先设计界面: 代码如下: <LinearLayout xmlns:android="http://schemas.android.com/ap ...

  6. 禁止uiscrollview垂直方向滚动,只允许水平方向滚动;或只允许垂直方向滚动

    禁止UIScrollView垂直方向滚动,只允许水平方向滚动 scrollview.contentSize =  CGSizeMake(你要的长度, 0); 禁止UIScrollView水平方向滚动, ...

  7. MonoDevelop几个常用的快捷键

    MonoDevelop几个常用的快捷键 CTRL+K  删除光标所在行的该行后面的代码 CTRL + ALT +C  注释/不注释该行 CTRL+ DOWN  像鼠标滚轮一样向下拖 CTRL + UP ...

  8. C#生成注册码

    string t = DateTime.Now.Ticks.ToString(); t = DESKey.DESEncrypt(t, DESKey.DesKeyStr); string[] strid ...

  9. Ajax最详细的参数解析和场景应用

    4.1.定义和用法 AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术. AJAX = 异步 J ...

  10. ios界面布局整理

    1 UIView 1.1 创建自定义的UIView的xib文件 [1]设置 file's Owner的 Custom Class 中的class 执行自定义控件类 [2]设置当前UIView 的屏幕大 ...