杨小杰博客提供免费教程下载和网站搭建技术教程,主要分享和发布网站源码,致力创造一个高质量网络资源教程的分享平台

SweetAlert-js超酷消息警告框插件

Young小杰2017-8-21 14:59网站搭建 (8)2015已提交到百度小标签: 网站优化 网站搭建教程 网站搭建技术教程

简单介绍

ScreenGif.gif

SweetAlert是一款神奇的javascript弹出消息警告框插件。可替换所有alert弹框

QQ截图20170821145921.png

使用方法

要使用该插件,首先要在header中引入以下文件(已打包附件内,上传注意是模版文件夹下路径):

<script src="<?php echo TEMPLATE_URL; ?>js/sweetalert.min.js"></script>
<link rel="stylesheet" href="<?php echo TEMPLATE_URL; ?>css/sweetalert.css" type='text/css' media='all' />
四种图标及调用方式:
swal("温馨提示!", "这是一个感叹号的提示","info");
swal("警告", "这是一个警告的提示","warning");
swal("错误提示", "这是一个错误的提示","error");
swal("完成", "这是一个完成的提示","success");

完整的SweetAlert代码

sweetAlert({
  title: "Are you sure?",
  text: "You will not be able to recover this imaginary file!",
  type: "warning",
  showCancelButton: true,
  confirmButtonColor: "#DD6B55",
  confirmButtonText: "Yes, delete it!",
  closeOnConfirm: false
}, function(){
  swal("Deleted!",
  "Your imaginary file has been deleted.",
  "success");
});

可用参数

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

原文地址:jQuery之家

SweetAlert大小:9.5KB | 来源:本地下载 | 下载次数:

评论:

alen Google Chrome 63.0.3239.132 非主流操作系统广东省江门市 电信 2018-02-11 01:26
当我从别的模板扒下后,才看到这里。。
貌似你的站也没有用这个特效
Young小杰四川省成都市 移动数据上网公共出口 2018-02-11 08:21
@alen:用了的,只是触发的地方不多,不信你可以下载个附件
从简 Google Chrome 55.0.2883.87 Windows 7山东省济南市 移动 2017-08-29 12:25
Oω0调用方式放在哪里呢
Young小杰四川省成都市 电信 2017-08-29 12:39
@从简:你这个这篇文章问这个问题好吗
夏恋博客 Google Chrome 55.0.2883.87 Windows 7江西省九江市 电信 2017-08-26 08:59
看起来不错,夏恋博客路过
剑客网 Google Chrome 55.0.2883.87 非主流操作系统江苏省镇江市 电信 2017-08-23 14:05
小杰这么6  OωO
我什么不自己搞个插件呢 ̄﹃ ̄
Young小杰四川省成都市 电信 2017-08-23 14:06
@剑客网:不会制作插件
剑客网Google Chrome 55.0.2883.87 非主流操作系统江苏省镇江市 电信 2017-08-23 19:27
@Young小杰: ̄﹃ ̄ 哦

发表评论: