sweetalert swal 简单使用示例详解

话不多说，直接上货！

PS：sweetalert.js导入项目使用就不介绍啦！

下面介绍2种使用方式：

第一种：弹框提醒信息，无确认按钮，延迟几秒之后跳转新的页面；

代码如下：

//弹出框提醒
swal({title: "安全认证通过",text: "手机号码认证通过，即将为您自动跳转登录...",icon: "success",buttons: false,timer: 4000,
});
//动画过渡完跳转
setTimeout(function(){window.location.href="https://www.baidu.com";return false;
},1000);

效果如下：

第二种，弹框提醒信息，有确认按钮，确认按钮之后过渡动画，最后跳转新的页面；

代码如下：

swal({title: "温馨提示",text: "安全认证通过，即将您自动登录...",icon: "success",buttons: "是的，我要跳转！",dangerMode: false,
}).then(function(gotoNext){if (gotoNext) {//过渡动画swal("跳转中，请稍等...", {icon: "success",buttons: false,timer: 3000,});//动画过渡完跳转setTimeout(function(){window.location.href="https://www.baidu.com";return false;   },1000);} else {//不做处理}
});

效果如下：

补充：简单的一些配置参数

showCancelButton：是否显示取消按钮；
animation：提示框弹出时的动画效果，可选（pop、none、slide-from-top、slide-from-bottom）；
timer：设置自动关闭提示框时间（毫秒）；
showConfirmButton：是否显示确定按钮；
confirmButtonText：定义确定按钮文本；
cancelButtonText：定义取消按钮文本；
imageUrl：定义弹出框的图片地址；

sweetalert swal 简单使用示例详解相关推荐

php带旋转动画刷新页面,css旋转动画效果的简单实现示例详解
我们可以通过css来做出动画效果,下面我为大家演示的是p的旋转,颜色过渡的动画 a{ text-align:center; line-height:100px; transition:all 2s; ...
python的用途实例-python assert的用处示例详解
使用assert断言是学习python一个非常好的习惯,python assert 断言句语格式及用法很简单.在没完善一个程序之前,我们不知道程序在哪里会出错,与其让它在运行最崩溃,不如在出现错误条件 ...
pythonxml库_对python 生成拼接xml报文的示例详解
最近临时工作要生成xml报名,通过MQ接口发送.简单小程序. 自增长拼成xml报文 Test_001.py # encoding=utf-8 import time orderId = '' s1= ...
rcs开机启动mysql_linux添加开机自启动脚本示例详解-阿里云开发者社区
linux添加开机自启动脚本示例详解 double2li 2017-04-14 1652浏览量简介: linux下(以RedHat为范本)添加开机自启动脚本有两种方法,先来简单的;一.在/etc/r ...
php中左移和右移,c语言左移和右移的示例详解
逻辑移位,简单理解就是物理上按位进行的左右移动,两头用0进行补充,不关心数值的符号问题. 算术移位,同样也是物理上按位进行的左右移动,两头用0进行补充,但必须确保符号位不改变. 算术移位指令算术移位 ...
通过CURL请求示例详解HTTPS协议
通过CURL请求示例详解HTTPS协议基于HTTPS通信是当前互联网最通用便捷的通信方式,简单理解来看可以视为HTTP协议 + SSL/TLS协议,通过一个curl的示例阐述一下HTTPS协议. 特 ...
python 匿名函数示例_扣丁学堂Python3开发之匿名函数用法示例详解
扣丁学堂Python3开发之匿名函数用法示例详解 2018-07-26 14:01:11 1324浏览今天扣丁学堂Python培训给大家分享关于Python3匿名函数用法,结合实例形式分析了Pyth ...
不愧是京东大牛！用Java实现黄金分割数的示例详解（附代码）
这篇文章主要介绍了java 实现黄金分割数的示例详解,具有很好的参考价值,希望对大家有所帮助.一起跟随小编过来看看吧. 黄金分割数 0.618 与美学有重要的关系.舞台上报幕员所站的位置大约就是舞台宽 ...
python简单计算器综合实验报告_Python实现的简单计算器功能详解
本文实例讲述了Python实现的简单计算器功能.分享给大家供大家参考,具体如下: 使用python编写一款简易的计算器计算器效果图首先搭建计算器的面板: 计算器面板结构建造一个继承于wx.Fra ...

sweetalert swal 简单使用示例详解

第一种：弹框提醒信息，无确认按钮，延迟几秒之后跳转新的页面；

第二种，弹框提醒信息，有确认按钮，确认按钮之后过渡动画，最后跳转新的页面；

补充：简单的一些配置参数

sweetalert swal 简单使用示例详解相关推荐

最新文章

热门文章