«

漂亮的alert美化插件sweet-alert.js对话框效果

时间:2015-10-29 13:24     作者:admin     分类: 代码人生


00.png01.png

Sweet Alert 是 JavaScript Alert的一个漂亮替换。SweetAlert会自动居中对齐页面上看起来很棒不管您使用的是台式电脑,手机或平板电脑。它甚至高度可定制。

03.png

同时支持设置图片在alert对话框里面哦!

04.png


要使用该插件,首先要在html的header中引入以下文件:

<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 “80×80” 当设定图片的路径后,你可以设定图片的大小,格式为两个数字中间带个”x”符号。
timer null 警告框自动关闭的时间。单位是ms。

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

查看演示


标签: 编程 代码 分享 JS

版权所有:Mrxn's Blog
文章标题:漂亮的alert美化插件sweet-alert.js对话框效果
除非注明,文章均为 Mrxn's Blog 原创,请勿用于任何商业用途,转载请注明作者和出处 Mrxn's Blog

扫描二维码,在手机上阅读

推荐阅读:

评论:
avatar
白羊 2016-12-28 21:58
这个博客背景动画是怎么设置的?
commentator
Mrxn 2016-12-29 10:34
@白羊:js文件里面有 你自己看吧
avatar
御坂网络 2015-10-30 08:14
和vs一样了,那么多参数好难记住的.
commentator
Mrxn 2015-10-30 14:20
@御坂网络:额 还好吧!