欢迎光临
小清新博客

前端提示框插件sweetalert

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

1、引入JS和CSS文件

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

<link href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.css" 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。
 收藏 (0) 打赏

您可以选择一种方式赞助本站

支付宝扫一扫赞助

微信钱包扫描赞助

未经允许不得转载:轻语博客 » 前端提示框插件sweetalert

分享到: 更多 (0)

评论 抢沙发

评论前必须登录!

立即登录   注册

切换注册

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录

切换登录

注册

我们将发送一封验证邮件至你的邮箱, 请正确填写以完成账号注册和激活