弹框json的特别好使.

sweetalert

示例

基本信息弹窗swal("这是一条信息!")
标题与文本的信息弹窗swal("这是一条信息!", "很漂亮,不是吗?")
成功信息弹窗!swal("干得漂亮!", "你点击了按钮!","success")
警告信息弹窗,“确认”按钮带有一个函数……
swal({
title: "确定删除吗?",
text: "你将无法恢复该虚拟文件!",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#DD6B55",
confirmButtonText: "确定删除!",
closeOnConfirm: false
},
function(){
swal("删除!", "你的虚拟文件已经被删除。", "success");
});
…… 给函数传入参数,"取消"按钮也可以执行。
swal({
title: "确定删除吗?",
text: "你将无法恢复该虚拟文件!",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#DD6B55",
confirmButtonText: "确定删除!",
cancelButtonText: "取消删除!",
closeOnConfirm: false,
closeOnCancel: false
},
function(isConfirm){
if (isConfirm) {
swal("删除!", "你的虚拟文件已经被删除。",
"success");
} else {
swal("取消!", "你的虚拟文件是安全的:)",
"error");
}
});
自定义图标信息弹窗
swal({
title: "漂亮!",
text: "这是自定义图标。",
imageUrl: "images/thumbs-up.jpg"
});
HTML信息弹窗
swal({
title: "HTML <small>标题</small>!",
text: "自定义<span style="color:#F8BB86">html<span>信息。",
html: true
});
定时关闭信息弹窗
swal({
title: "自动关闭弹窗!",
text: "2秒后自动关闭。",
timer: ,
showConfirmButton: false
});
输入信息弹窗
swal({
title: "输入!",
text: "输入一些有趣的话:",
type: "input",
showCancelButton: true,
closeOnConfirm: false,
animation: "slide-from-top",
inputPlaceholder: "输入一些话"
},
function(inputValue){
if (inputValue === false) returnfalse; if (inputValue === "") {
swal.showInputError("你需要输入一些话!");
return false
} swal("非常好!", "你输入了:" + inputValue,"success");
});
加载(AJAX请求示例)弹窗
swal({
title: "Ajax请求示例",
text: "提交运行ajax请求",
type: "info",
showCancelButton: true,
closeOnConfirm: false,
showLoaderOnConfirm: true,
},
function(){
setTimeout(function(){
swal("Ajax请求完成!");
}, );
});
你可以改变SweetAlert的主题样式!
<link rel="stylesheet" type="text/css" href="dist/sweetalert.css">
<link rel="stylesheet" type="text/css" href="themes/twitter.css">

配置

你可以使用这些参数,通过一个对象传入到sweetAlert中:

参数    默认值    描述
title null (required) 弹窗的标题。可以通过对象的”title”属性或第一个参数进行传递。
text null 弹窗的描述。可以通过对象的”text”属性或第二个参数进行传递。
type null 弹窗的类型。SweetAlert有四个内置类型,可以展示相应的图标动画: "warning","error", "success" and "info"。你也可以设置为"input"类型变成输入弹窗。可以通过对象的”type”属性或第三个参数进行传递。
allowEscapeKey true 如果设置为true,用户可以通过按下Escape键关闭弹窗。
customClass null 弹窗的自定义样式,可以通过对象的"customClass"属性进行添加。
allowOutsideClick false 如果设置为true,用户点击弹窗外部可关闭弹窗。
showCancelButton false 如果设置为true,“取消”按钮将会显示,用户点击取消按钮会关闭弹窗。
showConfirmButton true 如果设置为false,“确认”按钮将会隐藏。为了良好的用户体验,最好你设置了定时关闭或者allowOutsideClick为true时才将该参数设置为false。
confirmButtonText "OK" 使用该参数来修改“确认”按钮的显示文本。如果showCancelButton设置为true,确定按钮的显示文本将会自动使用“Confirm”而不是“OK”。
confirmButtonColor "#AEDEF4" 使用该参数来修改“确认”按钮的背景颜色(必须是十六进制值)。
cancelButtonText "Cancel" 使用该参数来修改“取消”按钮的显示文本。
closeOnConfirm true 设置为false,用户点击“确认”按钮后,弹窗会继续保持打开状态。如果点击“确认”按钮后需要打开另一个SweetAlert弹窗,这是非常有用的。
closeOnCancel true 这和closeOnConfirm的功能相似,只不过这个是“取消”按钮。
imageUrl null 为弹窗添加一个自定义的图标。这个参数是一个字符串图片路径。
imageSize "80x80" 如果设置了imageUrl,你可以使用像素(px)指定图片大小来描述你想要多大的图标。在一个字符串中使用“x”来分割两个值,第一个值是宽度,第二值是高度。
timer null 自动关闭弹窗的定时器。单位为毫秒(ms)。
html false 如果你设置为true,参数title和参数text的值将会被html解析显示而不是纯文本。(如果你担心被XSS攻击那就设置为false。)
animation true 如果设置为false, 弹窗的动画将会被禁用。其它字符串值:pop(这是animation设置为true时的默认值), slide-from-top, slide-from-bottom
inputType "text" 当使用type: "input"时,该参数用来改变输入的类型(例如:如果你想让用户输入密码,这可能是有用的)。
inputPlaceholder null 当使用输入类型时,你可以使用placeholder来帮助用户明白应该输入什么内容。
inputValue null 当使用type: "input"时,你希望在输入前展示默认值时,可以指定一个默认值。
showLoaderOnConfirm false 设置为true,当处于加载时会禁用确认按钮并显示为加载样式。
方法

SweetAlert还带有一些简单的方法,你可以调用它们:

方法    示例    描述
setDefaults swal.setDefaults({ confirmButtonColor: '#0000' }); 当调用SweetAlert时,如果你使用很多相同的设置,您可以在程序的开始使用setDefaults设置它们!
close swal.close(); 通过编程的方式将当前打开的SweetAlert弹窗关闭。
showInputError swal.showInputError("Invalid email!"); 如果用户输入的数据是错误的,在验证输入字段后会显示一个错误的信息。
enableButtons, disableButtons swal.disableButtons(); 禁用或启用用户点击取消按钮和确认按钮。

(网页)sweetalert api 中文开发文档和手册,项目放弃alert的更多相关文章

  1. sweetalert api中文开发文档和手册

    官网和下载地址: http://t4t5.github.io/sweetalert/  2016年10月30日14:10:21 废话,目前php开发越来越API话,所以php方法很多都是json返回数 ...

  2. 在线API,桌面版,jquery,css,Android中文开发文档,JScript,SQL掌用实例

    学习帮助文档大全 jquery,css,Android中文开发文档,JScript,SQL掌用实例 http://api.jq-school.com/

  3. jssip中文开发文档(完整版)

    jsSip开发文档 (官网地址:http://www.jssip.net/) 完整案例demo下载地址: http://download.csdn.net/download/qq_39421580/1 ...

  4. phpredis中文开发文档

    刚好要用看了网上翻译版本都是2011,2012年的,随手翻译一下新版 2017年10月28日23:48:08 使用方法 : Ctrl+F 官方英文版 https://github.com/phpred ...

  5. API集合开发文档

    百度翻译api https://www.cnblogs.com/DevilX5/p/7079470.html 实现QQ第三方登录.网站接入 http://blog.csdn.net/u01067894 ...

  6. uploadify中文开发文档,解决php多图上传

    图片上传好用插件有,比如 uploadify  ueditor html5的各种ajax上传插件,大部分都是异步,返回只是true之类,有些时候需要上传图片需要一起上传,其实可以通过操作流程来避免这个 ...

  7. 【原创】Odoo开发文档学习之:ORM API接口(ORM API)(边Google翻译边学习)

    官方ORM API开发文档:https://www.odoo.com/documentation/10.0/reference/orm.html Recordsets(记录集) New in vers ...

  8. .NET6使用DOCFX自动生成开发文档

    本文内容来自我写的开源电子书<WoW C#>,现在正在编写中,可以去WOW-Csharp/学习路径总结.md at master · sogeisetsu/WOW-Csharp (gith ...

  9. C#微信开发文档

    C#微信开发文档 开发前准备 微信公众平台链接: https://mp.weixin.qq.com/cgi-bin/home?t=home/index&lang=zh_CN 开发初期我们使用测 ...

随机推荐

  1. 【Java提高】---通过UUID、SHA-1、Base64组合加密

    通过UUID.SHA-1.Base64组合加密 该篇文章实现的最终效果是: 1)加密是不可逆的. 2)相同字符串加密产生后的字符串都不一样 3)所以要想比较两个字符串是否相等,需要用已经加过密的字符串 ...

  2. TP3.2 URL传参及模板输出

    本例子结合layer.open使用 HTML代码 onclick="return stulist(167,25);" JS代码 <script type="text ...

  3. haproxy配置示例和需要考虑的问题

    HaProxy系列文章:http://www.cnblogs.com/f-ck-need-u/p/7576137.html haproxy是一个非常优秀的负载均衡工具,它的特性非常丰富,功能也非常非常 ...

  4. 关于 Cortex-M3 的双堆栈机制

    CM3 的堆栈分为两个:主堆栈和进程堆栈. 那么,这两个栈分别在什么情况下使用呢? 我们看一下CM3的控制寄存器(CONTROL):控制寄存器用于定义特权级别,还用于选择当前使用哪个堆栈指针. CON ...

  5. R语言实战(一)——基础入门

    从今天开始接触R语言,主要参考的书籍是<R语言实战>. 1.安装R语言程序 Windows:http://mirror.bjtu.edu.cn/cran/ Linux:apt-get in ...

  6. 我的IdentityServer目录

    概念部分 理解oauth协议 理解什么是claim 学习Identity Server 4的预备知识 Open ID Connect(OIDC)在 ASP.NET Core中的应用 操作部分 入门: ...

  7. 结构型---装饰者模式(Decorator Pattern)

    定义 装饰者模式以对客户透明的方式动态地给一个对象附加上更多的责任,装饰者模式相比生成子类可以更灵活地增加功能. Component抽象构件           Component是一个接口或者是抽象 ...

  8. Hibernate的应用

    //首先获得SessionFactory的对象 SessionFactory sessionFactory = new Configuration().configure().buildSession ...

  9. sql server 行转列存储过程

    if object_id('[P_GetPriceTableBuy]','P') is not null drop procedure P_GetPriceTableBuy SET ANSI_NULL ...

  10. mysql中union 查询

    UNION ALL只是简单的将两个结果合并后就返回.这样,如果返回的两个结果集中有重复的数据,那么返回的结果集就会包含重复的数据了. 从效率上说,UNION ALL 要比UNION快很多,所以,如果可 ...