SweetAlert的简单使用
SweetAlert可以替代JavaScript原生的alert和confirm等函数呈现的弹出提示框,它将提示框进行了美化,并且允许自定义,支持设置提示框标题、提示类型、内容展示图片、确认取消按钮文本、点击后回调函数等。
这个插件是真的好用,样式也是非常优美;相对于其他的前端框架的弹出框,这个显得更加简洁方便,个人是极力推荐的~
要使用该插件,首先要导入相关的文件;
然后下面举出三个例子,其他具体信息详见官网。
最简单的调用方法(只有一行字,一个确定按钮):
swal("HelloWorld!");
也可以写带有标题信息的:
swal("恭喜","操作成功","success");
上述参数意思分别是:标题、文本、提示类型(success,error,warning,input)
还可以带有更多自定义功能具有回调函数的功能型提示框:
swal({
title: "确认提交?",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#DD6B55",
confirmButtonText: "确认",
cancelButtonText: "取消",
closeOnConfirm: false,
closeOnCancel: true
}, function(isConfirm){
if (isConfirm) {
f.submit();
} else {
}
});
相关属性:
- showCancelButton:是否显示取消按钮;
- showConfirmButton:是否显示确定按钮;
- animation:提示框弹出时的动画效果,可选(pop、none、slide-from-top、slide-from-bottom);
- confirmButtonText:定义确定按钮文本;
- confirmButtonColor : 定义确定按钮颜色;
- cancelButtonText:定义取消按钮文本;
- function(isConfirm){}:定义回调函数;
- closeOnConfirm : 点击确定按钮关闭窗口;
- closeOnCancel : 点击关闭按钮关闭窗口;
更多详细使用细节详见官网:http://www.dglives.com/demo/sweetalert-master/example/
目前SweetAlert2也流行起来,相较之前的版本有了较大的提升,可在其中嵌入html标签了