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

简要教程

SweetAlert是一款神奇的javascript弹出消息警告框插件。

来通过一张gif图片看看SweetAlert的效果:

使用方法

要使用该插件,首先要在html的header中引入以下文件:(文件下载地址:http://files.cnblogs.com/files/wuxiang/sweetalter.zip)

<script src="lib/sweet-alert.min.js"></script>

<link rel="stylesheet" type="text/css" href="lib/sweet-alert.css">

最基本的调用方法:

sweetAlert("Hello world!");

带错误图标的警告框:

sweetAlert("Oops...", "Something went wrong!", "error");

一个带有确认按钮的警告框,点击确认按钮可触发动画:

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。

更多关于SweetAlert的内容请参考:https://github.com/t4t5/sweetalert

本文版权属于jQuery之家,转载请注明出处:http://www.htmleaf.com/jQuery/Lightbox-Dialog/20141218888.html

时间: 2024-11-11 00:54:30

SweetAlert-js超酷消息警告框插件的相关文章

超酷消息警告框插件(SweetAlert)

今天给大家推荐一款不错的超酷消息警告框–SweetAlert:SweetAlert是一款不需要jQuery支持的原生js提示框,风格类似bootstrap.它的提示框不仅美丽动人,并且允许自定义,支持设置提示框标题.提示类型.内容展示图片.确认取消按钮文本.点击后回调函数等.和传统的alert相比: SweetAlert 能在页面自动居中,支持桌面环境,移动端和平板,并且高度自定义.接下来看看它的具体使用! HTML 首先引入相应的js和css,该插件不需要jQuery插件的支持: <link

基于Animate.css的炫酷jQuery消息通知框插件

notification是一款基于Animate.css的炫酷jQuery消息通知框插件.该插件可以在屏幕的四个角显示消息通知框,结合Animate.css可以制作出多种效果非常炫酷的CSS3动画特效. 在线预览   源码下载 使用方法 使用该jQuery消息通知框插件需要引入jQuery,notification.js,animate.css和notification.css文件. <link rel='stylesheet' href='css/animate.min.css'> <

第二百四十六节,Bootstrap弹出框和警告框插件

Bootstrap弹出框和警告框插件 学习要点: 1.弹出框 2.警告框 本节课我们主要学习一下 Bootstrap 中的弹出框和警告框插件. 一.弹出框 弹出框即点击一个元素弹出一个包含标题和内容的容器. 基本用法 注意:必须在js结合popover()方法使用 data-toggle="popover"弹出框事件绑定,写在触发弹出框的元素里,执行弹出框事件点击弹出或隐藏(Bootstrap)title=""设置弹出框标题,写在弹出框元素里,(Bootstrap)

第 16 章 弹出框和警告框插件

学习要点: 1.弹出框 2.警告框 主讲教师:李炎恢 本节课我们主要学习一下 Bootstrap 中的弹出框和警告框插件. 一.弹出框 弹出框即点击一个元素弹出一个包含标题和内容的容器. //基本用法 <button class="btn btn-lg btn-danger" type="button" data-toggle="popover" title="弹出框" data-content="这是一个弹出

Bootstrap 弹出框和警告框插件

一.弹出框 弹出框即点击一个元素弹出一个包含标题和内容的容器. //基本用法 <button class="btn btn-lg btn-danger" type="button" data-toggle="popover" title="弹出框" data-content="这是一个弹出框插件"> 点击弹出/隐藏弹出框 </button>   <script type=&qu

JS—超酷时钟

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

js消息提示框插件-----toastr用法

(本文系转载) 因为个人项目中有一个提交表单成功弹出框的需求,从网上找了一些资料,发现toastr这个插件的样式还是不错的.所以也给大家推荐下,但是网上的使用资料不是很详细,所以整理了一下,希望能给大家带来帮助. toastr 官网http://codeseven.github.io/toastr/ 这个样式插件支持直接导cdn入链接,但是我尝试了一下cdn加载速度太慢,所以推荐直接下载文件后导入文件 个人演示地址,因为把js放在了头部所以加载时间可能有点长,而且我发现自己的服务器不是很稳定,所

jQuery和CSS3超酷表单美化插件

这是一款效果非常精美炫酷的jQuery和CSS3联系方式表单美化插件.大多数网站上都有让用户填写的联系方式表单,一个设计良好的表单能够大大的提升用户的体验度.该表单美化插件在原生HTML表单的基础上进行加工,并使用jQuery来制作label动画,使表单样式更加大方得体. 这个表单美化插件中包含了常用的表单元素:输入框.下拉框.单选按钮.复选框和文本框. 在线演示:http://www.htmleaf.com/Demo/201503121507.html 下载地址:http://www.html

jQuery和CSS3超酷三面板幻灯片插件

这是一款效果非常酷的jquery和css3三面板幻灯片特效插件.该幻灯片插件将一张图片分割为三部分,在幻灯片切换的时候,图片的每一部分都从不同方向进入显示,效果非常不错. 你可以使用左右导航箭头或下面的原点导航来控制幻灯片图片的切换.该幻灯片被设计为可以加载无限图片的模式,所以你可以任意添加你想要播放的图片的数量. 在线演示:http://www.htmleaf.com/Demo/201503271583.html 下载地址:http://www.htmleaf.com/jQuery/Slide