前端提示框插件sweetalert-轻语博客

sweetalert是一款前端提示框插件，使用也非常简单，而且还内置了许多参数，他可以替代alert()本站即采用的该款插件提示，今天把使用方法提供给大家！

1、引入JS和CSS文件

可以直接进入官网下载然后到头部进入或者直接从CDN引入

<link href="https://www.qyblog.cn/redirect/aHR0cHM6Ly9jZG5qcy5jbG91ZGZsYXJlLmNvbS9hamF4L2xpYnMvc3dlZXRhbGVydC8xLjEuMy9zd2VldGFsZXJ0Lm1pbi5jc3M=" target="_blank" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.js"></script>

2、开始使用

在需要使用弹窗提示的地方加入以下代码

swal("操作完成", "一个完美的提示框!", "success"）

也可以使用参数

swal({
  title: "操作完成",
  text: "一个完美的提示框",
  type: "success",
  showCancelButton:false
});

该弹窗提供以下参数可供修改

参数	默认值	描述
title	null(required)	窗口的名称。可以通过对象的"title"属性或第一个参数进行传递。
text	null	窗口的描述。可以通过对象的"text"属性或第二个参数进行传递。
type	null	窗口的类型。SweetAlert 有4种类型的图标动画："warning", "error", "success" 和 "info".可以将它放在"type"数组或通过第三个参数传递。
allowOutsideClick	false	如果设置为“true”，用户可以通过点击警告框以外的区域关闭警告框。
showConfirmButton	true	是否显示“确认”按钮可用参数 "false" "true"
showCancelButton	false	是否显示“取消”按钮可用参数 "false" "true"
confirmButtonText	"OK"	该参数用来改变确认按钮上的文字。如果设置为"true"，那么确认按钮将自动将"Confirm"替换为"OK"。
confirmButtonColor	"#AEDEF4"	该参数用来改变确认按钮的背景颜色（必须是一个HEX值）。
cancelButtonText	"Cancel"	该参数用来改变取消按钮的文字。
closeOnConfirm	true	如果希望以后点击了确认按钮后模态窗口仍然保留就设置为"false"。该参数在其他SweetAlert触发确认按钮事件时十分有用。
imageUrl	null	添加自定义图片到警告框上。必须是图片的完整路径。
imageSize	"80x80"	当设定图片的路径后，你可以设定图片的大小，格式为两个数字中间带个"x"符号。
timer	null	警告框自动关闭的时间。单位是ms。