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

sweetAlert的更多相关文章

  1. zTree和SweetAlert插件初探

    1.zTree插件简介 zTree是一个依靠 jQuery实现的多功能“树插件”.优异的性能.灵活的配置.多种功能的组合是zTree最大优点.专门适合项目开发,尤其是树状菜单.树状数据的Web显示.权 ...

  2. sweetalert api中文开发文档和手册

    官网和下载地址: http://t4t5.github.io/sweetalert/  2016年10月30日14:10:21 废话,目前php开发越来越API话,所以php方法很多都是json返回数 ...

  3. 很漂亮的SweetAlert.js 弹出层

    在线实例 实例演示 使用方法 swal("Here's a message!") 复制 参数详解 参数 默认值 描述 title null(required) 窗口的名称.可以通过 ...

  4. SweetAlert – 替代 Alert 的漂亮的提示效果

    Sweet Alert 是一个替代传统的 JavaScript Alert 的漂亮提示效果.SweetAlert 自动居中对齐在页面中央,不管您使用的是台式电脑,手机或平板电脑看起来效果都很棒.另外提 ...

  5. 弹出框三 之 sweetalert

    1下载sweetalert 2.引入到项目中 <link href="~/Content/sweetalert.css" rel="stylesheet" ...

  6. 推荐一款炫酷的提示框插件SweetAlert

    官方网址 http://t4t5.github.io/sweetalert/ 项目地址 https://github.com/t4t5/sweetalert

  7. 基于jquery的响应式提示框SweetAlert

    介绍款交互性非常不错的jquery弹出层插件,支持消息提示.错误提示.确认框提示等.交互式体验感非常不错,比如咱们现在体验非常不错的微信支付.支付宝等完成后的效果.不过本插件至少支持IE9+.使用方式 ...

  8. Android studio SweetAlert for Android

    找到个开源项目.github:https://github.com/pedant/sweet-alert-dialog 效果图:https://raw.githubusercontent.com/pe ...

  9. 提示框插件SweetAlert

    SweetAlert可以替代Javascript原生的alert和confirm等函数呈现的弹出提示框, 它将提示框进行了美化,并且允许自定义, 支持设置提示框标题.提示类型.内容展示图片.确认取消按 ...

  10. Ionic2中集成第三方控件Sweetalert

    Ionic2混合开发,入坑系列:Ionic2中集成第三方控件Sweetalert 注:Sweetalert2已经可以直接从npm中下载安装 npm install --save sweetalert2 ...

随机推荐

  1. phpmyadmin #1045 - Access denied for user 'root'@'localhost' (using password: NO)

    phpmyadmin访问遇到1045问题 #1045 - Access denied for user 'root'@'localhost' (using password: NO) 解决办法 找到p ...

  2. oracle根据某个字段去重实例

    if not object_id('Tempdb..#T') is null drop table #T Go Create table #T([ID] int,[Name] nvarchar(1), ...

  3. 第四章 --- 关于Javascript 设计模式 之 迭代器模式

    今天我先写 两个常用的迭代器的 例子.(同学们先自行体会这二种迭代器的优缺点) 需求:比较两个数组是否相等 tips: 当数组的下标不为数字的时候,默认为 该键值对 为 对象. 然后迭代器的原理基本来 ...

  4. chrome谷歌浏览器插件制作简易教程

    1.在磁盘上创建一个目录,用来放应用的代码和资源 2.在这个目录中,创建一个文本文件,命名为manifest.json,其内容为: { "manifest_version": 2, ...

  5. Visual Studio 版本转换工具WPF版开源了

    想法的由来 入职一家新公司,领导给了个任务,要编写一个视频监控软件,等我编写调试好,领导满意了以后,这个软件要加入到公司的一个软件系统中去(这个添加工作不用我来做,嘻嘻,看着自己的软件被别人使用,心情 ...

  6. ResultSet can not re-read row data for column 1.

    error:ResultSet can not re-read row data for column 1. 将数据类型改为varchar(max)后,查询数据错误 改正:将jdbc驱动改为jtds驱 ...

  7. DOM0编程与基础方法

    ## 这里记录一下DOM编程的基础与方法----### DOM 的O:对象 objectO表示Object,对象的意思.JavaScript中对象可以分为三种类型1. 用户定义对象(user-defi ...

  8. Java中的24种设计模式与7大原则

    一.创建型模式 1.抽象工厂模式(Abstract factory pattern): 提供一个接口, 用于创建相关或依赖对象的家族, 而不需要指定具体类.2.生成器模式(Builder patter ...

  9. AJAX获取数据成功后的返回数据如何声明成全局变量

    var result=""; $.ajax({ type: "post", url: "../reportRule/main.do?method=se ...

  10. 解决Unsupported major.minor version 51.0错误

    解决Unsupported major.minor version 51.0错误使用jdk6运行项目时发生了Unsupported major.minor version 51.0错误.经过网上搜索发 ...