官网和下载地址： http://t4t5.github.io/sweetalert/ 2016年10月30日14:10:21
废话，目前php开发越来越API话，所以php方法很多都是json返回数据，所以使用前段页面直接处理返回数据也越来越常用，而且用户体验也会更好
-
基本消息消息弹窗
swal("Here's a message!") -
下面有文字的标题弹窗
swal("Here's a message!", "It's pretty, isn't it?") -
一个成功的消息弹窗
swal("Good job!", "You clicked the button!", "success") -
一个警告消息，其功能附加到“确认”按钮的弹窗
swal({
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");
}); -
并通过传递一个参数，你可以执行别的“取消”
swal({
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!",
cancelButtonText: "No, cancel plx!",
closeOnConfirm: false,
closeOnCancel: false
},
function(isConfirm){
if (isConfirm) {
swal("Deleted!", "Your imaginary file has been deleted.", "success");
} else {
swal("Cancelled", "Your imaginary file is safe :)", "error");
}
}); -
带有自定义图标
swal({
title: "Sweet!",
text: "Here's a custom image.",
imageUrl: "images/thumbs-up.jpg"
}); -
自定义HTML消息
swal({
title: "HTML <small>Title</small>!",
text: "A custom <span style="color:#F8BB86">html<span> message.",
html: true
}); -
带有自动关闭计时器的消息的弹窗
swal({
title: "Auto close alert!",
text: "I will close in 2 seconds.",
timer: 2000,
showConfirmButton: false
}); -
替换“提示”功能
swal({
title: "An input!",
text: "Write something interesting:",
type: "input",
showCancelButton: true,
closeOnConfirm: false,
animation: "slide-from-top",
inputPlaceholder: "Write something"
},
function(inputValue){
if (inputValue === false) return false;
if (inputValue === "") {
swal.showInputError("You need to write something!");
return false
}
swal("Nice!", "You wrote: " + inputValue, "success");
}); -
使用加载器（例如AJAX请求）
swal({
title: "Ajax request example",
text: "Submit to run ajax request",
type: "info",
showCancelButton: true,
closeOnConfirm: false,
showLoaderOnConfirm: true,
},
function(){
setTimeout(function(){
swal("Ajax request finished!");
}, 2000);
}); -
你也可以改变SweetAlert的主题css
<link rel="stylesheet" type="text/css"href="dist/sweetalert.css">
<link rel="stylesheet" type="text/css"href="themes/twitter.css">
安装
-
通过引用必要的文件来初始化插件：
<script src="dist/sweetalert.min.js"></script>
<link rel="stylesheet" type="text/css" href="dist/sweetalert.css"> -
页面加载后调用SweetAlert函数
swal({
title: "Error!",
text: "Here's my error message!",
type: "error",
confirmButtonText: "Cool"
});
配置
这里是你可以使用的键，如果你传递一个对象到sweetAlert：
modal中文翻译是模态框 ,次文档为了理解容易，现在统一翻译为动态弹出框
|
参数 |
默认值 |
说明描述 |
|---|---|---|
| title | null (required) | 动态弹出框的标题。 它可以添加到键“title”下的对象，也可以作为函数的第一个参数传递 |
| text | null | 动态弹出框的描述。 它可以被添加到键“文本”下的对象或作为函数的第二个参数传递 |
| type | null | 动态弹出框的类型。 SweetAlert自带4种内置类型，会显示相应的图标动画：“warning”，“error”，“success”和“info”。 您也可以将其设置为“输入”以获得提示模态。 它可以放在键“类型”下的对象中，也可以作为函数的第三个参数传递 |
| allowEscapeKey | true | 如果设置为true，用户可以通过按退出键退出动态弹出框 |
| customClass | null | 模态的自定义CSS类。 它可以添加到对象的键“自定义类”下 |
| allowOutsideClick | false | 如果设置为true，用户可以通过点击模态来关闭动态弹出框 |
| showCancelButton | false | 如果设置为true，将显示一个“取消”按钮，用户可以单击该按钮来关闭动态弹出框 |
| showConfirmButton | true | 如果设置为false，“确定/确认”按钮将被隐藏。 确保您设置一个计时器或设置允许外点击为true时使用此，以免引起用户的烦恼 |
| confirmButtonText | "OK" | 使用此按钮可以更改“确认”按钮上的文本。 如果showsCancelButton设置为true，确认按钮将自动显示“Confirm”，而不是“OK” |
| confirmButtonColor | "#AEDEF4" | 使用此选项可更改“确认”按钮的背景颜色（必须为十六进制值） |
| cancelButtonText | "Cancel" | 使用此按钮可以更改“取消”按钮上的文本 |
| closeOnConfirm | true | 如果您希望动态弹出框保持打开，即使用户按下“确认”按钮，设置为false。 如果附加到“确认”按钮的功能是另一个SweetAlert，这是特别有用的 |
| closeOnCancel | true | 与关闭相同确认，但用于取消按钮 |
| imageUrl | null | 为动态弹出框添加自定义图标。 应包含带有图像路径的字符串 |
| imageSize | "80x80" | 如果设置了imageUrl，您可以指定imageSize来描述图标在px中的大小。 传递一个字符串，两个值之间用“x”分隔。 第一个值是宽度，第二个值是高度 |
| timer | null | 动态弹出框的自动关闭定时器。 设置为ms（毫秒）。 |
| html | false | 如果设置为true，将不转义标题和文本参数。 （如果您担心XSS攻击，请设置为false。） |
| animation | true | 如果设置为false，动态弹出框动画将被禁用。 可能的（字符串）值：pop（动画设置为true时的默认值），从顶部滑动，从底部滑动 |
| inputType | "text" | 使用type：“input”时更改输入字段的类型（如果您希望用户输入其密码，这将非常有用） |
| inputPlaceholder | null | 使用输入类型时，可以指定一个占位符来帮助用户 |
| inputValue | null | 指定在使用类型时希望输入显示的默认文本值：“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(); | 禁用或启用用户单击取消和确认按钮 |
一个实例
<script>
$(document).ready(function () {
//删除
$(document).on('click', '[id=ApiManagement_del]', function () {
var id = $(this).attr('rel'); swal({
title: "您确定要执行此操作吗？",
// text: "删除后将无法恢复，请谨慎操作！",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#DD6B55",
confirmButtonText: "确定",
closeOnConfirm: false
}, function () { $.ajax({
url: "{:U('App_admin/ApiManagement/del')}",
data: {
app_api_id: id
},
type: 'post',
cache: false,
success: function (msg) {
if (msg.code === 1) {
swal("删除成功！", "", "success");
$('.confirm').click(function () { //额外绑定一个事件，当确定执行之后返回成功的页面的确定按钮，点击之后刷新当前页面或者跳转其他页面
location.reload();
}); } else {
swal("删除失败！", "", "error");
$('.confirm').click(function () { //
location.reload();
});
}
}
});
});
}); });
</script>