一句话介绍

SweetAlert是一个JS插件，能够完美替代JS自带的alert弹出框，并且功能强大，设计优美。

引用

直接在官网下载CSS和JavaScript文件，解压后找到/dist文件夹，里面有CSS样式文件和JS脚本，在自己文件中引用它们：

<!-- 引用sweetalert css 和 js --><script src="sweetalert-master/dist/sweetalert.min.js"></script><link rel="stylesheet" type="text/css" href="sweetalert-master/dist/sweetalert.css">

然后在需要用到alert()的地方用swal()即可。
先看一个最基本的效果：
点击Try me按钮，弹出一条警告消息

<button>Try me</button><script>var ele = document.getElementsByTagName("button")[0];ele.onclick = function () {swal("这是一条alert消息");}
</script>

效果图：sweetalert是在屏幕中央弹出一个模态框

基本用法

最基本的形式：swal()，用法完全同JS自带的alert()，在括号内传入消息即可，如同上面的栗子演示的。
但是swal()的强大之处在于，它可以接收参数来自定义模态框，看下面的效果：

<button>Try me</button><script>var ele = document.getElementsByTagName("button")[0];ele.onclick = function () {swal({title: "标题",text: "这里是自定义文本",type: "success"});}
</script>

效果图：

参数介绍

swal()以键值对的形式接收关键字参数，下面介绍一些常用的：

参数	描述
title	模态框的标题
text	模态框的文本描述
type	模态框的类型。sweetalert内建了4中基本的模态框样式，分别是：warning，error，success，和info，每一种对应不同的按钮和动画效果。另外，你也可以设置为input，来显示一个文本输入框。
showCancelButton	如果设为true, 可以显示‘取消’按钮，用以点击关闭模态框
showConfirmButton	显示‘确认’按钮，默认不需要设置。如果设为false, 将不显示‘确认’按钮。如果你执意这么做，请确认你设置了timer(定时器)或者设置allowOutsideClick(允许点击外部区域关闭)参数为true，以免对用户造成困扰。
timer	模态框关闭定时器，单位是毫秒，例如，设为1000就是1秒后自动关闭模态框
allowEscapeKey	如果设为true, 用户可以通过键盘上的ESC关闭模态框
confirmButtonText	自定义确认按钮的显示文本。
confirmButtonColor	自定义确认按钮颜色，必须是16进制的格式
cancelButtonText	自定义取消按钮的显示文本
closeOnConfirm	如果设置为false，那么，点击了确认按钮后，模态框不会关闭。当我们需要二次确认的操作时，这一点会很有用。下面的例子会演示这一点。
closeOnCancel	同上，只是用于取消按钮。

示例

下面我们做一个删除文件前的确认效果：警告模态框 + 二次确认

<button>Try me</button><script>var ele = document.getElementsByTagName("button")[0];ele.onclick = function () {swal({title: "你确定?",text: "文件将被永久删除，此操作不可恢复!",type: "warning",showCancelButton: true,confirmButtonColor: "#DD6B55",confirmButtonText: "是的，删除!",cancelButtonText: "容我三思",closeOnConfirm: false// 设置closeOnConfirm: false，下面二次确认按钮被点击后才会关闭模态框},function () {swal({title: "删除！",text: "你的文件已被删除",type: "success"})});}
</script>

效果图：

如果想了解更多有趣的栗子，请移步官网： SweetAlert

SweetAlert用法相关推荐

sweetalert2中ajax用法,ajax结合sweetalert
$('.del').on('click',function () { // 先将当前标签对象存储起来 let currentBtn = $(this); // 二次确认弹框 swal({ title: ...
Android10弹出截屏对话框,Android一个美丽而聪明的警告对话框SweetAlert
由JavaScript启发SweetAlert安卓对话框截图建立使用SweetAlertDialog最简单的方法是将图书馆作为AAR依赖添加到您的构建. Maven的 cn.pedant.swe ...
SweetAlert详解
官方给出的SweetAlert介绍是:SweetAlert可以替代JavaScript原生的alert和confirm等函数呈现的弹出提示框,它将提示框进行了美化,并且允许自定义,支持设置提示框标题. ...
sweetalert php,SweetAlert详解
官方给出的SweetAlert介绍是:SweetAlert可以替代JavaScript原生的alert和confirm等函数呈现的弹出提示框,它将提示框进行了美化,并且允许自定义,支持设置提示框标题. ...
sweetalert 显示html,SweetAlert 弹窗插件入门教程
说明功能说明:一款美的无可替代的弹窗插件同类文章这里是其他博主写的几篇,小编觉得挺不错的,大家可以与本文综合来看 ①CSDN 点击访问 ②博客园-北执点击访问 ③博客园-郁冬点击访问 ④闲云 ...
sweetalert_用于将SweetAlert集成到Vuejs的小包装器
sweetalert VueSwal (VueSwal) A small wrapper for integrating SweetAlert to Vuejs. (Compatible with S ...
SweetAlert入门教程
SweetAlert入门教程前些天在做后台管理系统,在用户交互这块(弹窗.提示相关),用了一款还不错的插件SweetAlert(一款原生js提示框,允许自定义,支持设置提示框标题.提示类型.确认取消 ...
c语言中external，static关键字用法
static用法: 在C中,static主要定义全局静态变量.定义局部静态变量.定义静态函数. 1.定义全局静态变量:在全局变量前面加上关键字static,该全局变量变成了全局静态变量.全局静态变量有 ...
Pandas_transform的用法
先来看一个实例问题. 如下销售数据中展现了三笔订单,每笔订单买了多种商品,求每种商品销售额占该笔订单总金额的比例.例如第一条数据的最终结果为:235.83 / (235.83+232.32+107.9 ...

SweetAlert用法

一句话介绍

引用

基本用法

参数介绍

示例

SweetAlert用法相关推荐

最新文章

热门文章