sweetalert是一款前端提示框插件,使用也非常简单,而且还内置了许多参数,他可以替代alert()本站即采用的该款插件提示,今天把使用方法提供给大家!
1、引入JS和CSS文件
可以直接进入官网下载然后到头部进入或者直接从CDN引入
<link href="https://www.yiricheng.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 | “80×80” | 当设定图片的路径后,你可以设定图片的大小,格式为两个数字中间带个”x”符号。 |
timer | null | 警告框自动关闭的时间。单位是ms。 |
一日程新手WP建站指南(https://www.yiricheng.cn/),为广大编程爱好者提供零基础快速搭建博客网站的方法,分享计算机网络、HTML、CSS、JavaScript、PHP、响应式设计以及Python自动化办公的博客文章,另有各类小工具、电子书、免费教程。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。