现在位置首页 / 前端开发 /正文

SweetAlert.js 弹出层控件使用demo

作者: IT小兵 | 2016年10月27日| 热度:℃ | 评论: |参与:

本站分享了很多关于jquery的弹出层控件:

比如: 

[layer各种弹窗(jQuery弹出层插件)使用心得]

[基于bootstarp的对话框/弹出框Dailog 插件:oaoDailog]

[JQuery+CSS3实现封装弹出登录框效果]

[jquery 弹出框插件:Fancybox完整使用说明及demo]

[Jquery弹出框插件ColorBox打开iframe并传值demo]


今天给大家分享一个非常漂亮的弹出层控件:SweetAlert.js

首先看效果图:

成功提示:

失败提示:

确认框提示:

在线演示地址:

在线预览 - 手册网

http://www.shouce.ren/example/try?pc=/api/jq/5733e367016e3/index.html 

使用方法

  1. swal("Here's a message!")

复制

参数详解


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

点击阅读本文所属分类的更多文章: 前端开发 。和高手一起交流:346717337
友荐云推荐

未注明转发、原文均为本站原创。分享本文请注明 原文链接

给您更多信息和帮助

在这里您可以找到更多:

技术交流群:346717337 Jquery插件交流

投稿:[email protected]

承接:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/业务咨询

echarts教程系列
本月最热文章

微信扫一扫,徜徉悠嘻网,您的休闲乐园

微信公众号:快乐每一天

随机文章
标签

技术交流群:346717337

投稿:[email protected]

专业专注:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/付费问题咨询