sweetalert swal 简单使用示例详解

原创已于 2022-09-09 17:48:34 修改 · 3.7k 阅读

15 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #html

于 2021-05-24 17:01:54 首次发布

前端专栏收录该内容

11 篇文章

订阅专栏

本文介绍了如何使用SweetAlert2库创建两种不同的提示信息效果：一种是无确认按钮的自动跳转，另一种是有确认按钮后的过渡动画跳转。详细展示了相关代码实现，并提供了配置参数的简单说明，如定时关闭、按钮文本等，适用于前端开发中的用户体验优化。

话不多说，直接上货！

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：定义弹出框的图片地址；