快速开始
通过 RawGit
<-- 标准版 -->
<script src="https://cdn.rawgit.com/alertifyjs/alertify.js/v1.0.10/dist/js/alertify.js"></script>
<-- angular模块 -->
<script src="https://cdn.rawgit.com/alertifyjs/alertify.js/v1.0.10/dist/js/ngAlertify.js"></script>通过 Bower
bower install --save alertifyjs通过 NPM
npm install --save alertifyjs禁用默认 CSS
如果不想使用默认的CSS，只需要在引入javascript文件之前插入自己的样式文件（任意id="alertifyCSS" 的
style 或 link 元素）：
<link rel="stylesheet" href="/path/to/custom/styles.css" id="alertifyCSS">
<script src="/path/to/alertify.js"></script>注意
我们会在主要的CDN上发布最新版本，在此之前，您也可以在GitHub上下载，或者通过NPM或Bower进行安装。
如果您通过Bower或NPM进行安装，则需要在HTML中引入“dist”文件夹中的文件，以便插件能正常使用。
还需要注意的是，CSS默认是JS动态生成的，不需要通过单独引入样式文件的方式来使用主题。由于CSS会被JS插入到<link>元素或<style>元素的前面，所以您也可以使用自己的样式来覆盖它。
Angular JS
此插件也有AngularJS的版本。它的名称是“ngAlertify.js”，如果您正在构建AngularJS应用的话可以考虑使用它。
如果您想查看通过ngAlertify实现日志消息的在线示例， 请点击这里 。
初始化 ngAlertify
// 请确保已经引入了ngAlertify.js文件
angular
.module("myApp", ["ngAlertify"])
.controller("myController", function($scope, alertify) {
alertify.success("欢迎使用alertify!");
});性能
Alertify是基于高性能，轻量级的原则来设计的（这也就意味着它不像其他插件那样有丰富的功能，我们也不打算增加更多的功能，实际上这也是我们的初衷），所以对于各种网站和用户来说，它是一个不错的选择。
目前，整个库的JavaScript和CSS只有2.29KB（gzip压缩后），并且以后会越来越小。考虑到它仅有一个HTTP请求，且不需要其他依赖，所以更值得选择。
Angular模块只有2.32KB，所以也很轻量级！
使用方法
对话框
Alert 对话框
对话框显示文本，需要用户知晓消息内容
代码示例
alertify.alert("消息");Confirm 对话框
代码示例
// confirm 对话框
alertify.confirm("消息", function () {
// 用户点击"ok"按钮
}, function() {
// 用户点击"cancel"按钮
});Prompt 对话框
代码示例
alertify
.defaultValue("默认值")
.prompt("这是一个Prompt对话框",
function (val, ev) {
// The click event is in the event variable, so you can use it here.
ev.preventDefault();
// The value entered is availble in the val variable.
alertify.success("您单击了OK，类型为：" + val);
}, function(ev) {
// The click event is in the event variable, so you can use it here.
ev.preventDefault();
alertify.error("您单击了Cancel");
});自定义标签
您也可以轻松设定自己的按钮标签（文字），并不一定要使用"Ok"和"Cancel"。
代码示例
alertify
.okBtn("同意")
.cancelBtn("拒绝")
.confirm("自定义按钮标签的Confirm对话框", function (ev) {
// The click event is in the
// event variable, so you can use
// it here.
ev.preventDefault();
alertify.success("您单击了OK");
}, function(ev) {
// The click event is in the
// event variable, so you can use
// it here.
ev.preventDefault();
alertify.error("您单击了Cancel");
});Ajax - 多个对话框
代码示例
alertify.confirm("确认？", function (ev) {
// The click event is in the
// event variable, so you can use
// it here.
ev.preventDefault();
alertify.alert("AJAX成功以后OK");
}, function(ev) {
// The click event is in the
// event variable, so you can use
// it here.
ev.preventDefault();
alertify.alert("AJAX成功以后Cancel");
});Promise Aware
如果您的浏览器支持promises，您可以使用它们来代替回调函数
代码示例
if ("function" !== typeof Promise) {
alertify.alert("您的浏览器不支持promises");
return;
}
alertify.confirm("确认？").then(function (resolvedValue) {
// "resolvedValue" is an object with the following keys:
// buttonClicked
// inputValue (only for prompts)
// event
// The click event is in
// resolvedValue, so you can use
// it here.
resolvedValue.event.preventDefault();
alertify.alert("您单击了" + resolvedValue.buttonClicked + "按钮！");
});日志消息
位置设置
代码示例
alertify.delay(1000); // 快速的显示
alertify.log("默认在左下角的位置显示");
setTimeout(function() {
alertify.logPosition("左上角");
alertify.log("左上角");
}, 1500);
setTimeout(function() {
alertify.logPosition("右上角");
alertify.log("右上角");
}, 3000);
setTimeout(function() {
alertify.logPosition("右下角");
alertify.log("右下角");
}, 4500);
setTimeout(function() {
alertify.reset(); // 重置
alertify.log("默认位置");
}, 6000);设置父元素
可以设置一个父元素，将Alertify添加到该DOM节点中
代码示例
// Alertify 默认被添加在document.body中。
// 您可以轻松改变它，比如：
var elem = document.getElementById("my-element");
alertify.parent(elem);标准日志
代码示例
alertify.log("标准日志消息");带HTML的标准日志
HTML片段也可以在日志消息正常显示
代码示例
var msg = "<img src='https://placehold.it/256x128'>" +
"<h3>这里是HTML内容</h3>" +
"<p>看起来不错，不是吗？</p>";
alertify.log(msg);带回调函数标准日志
请注意，设置了回调函数以后，单击日志消息并不会自动关闭，这与之前有所不同。这也就意味着如果用户多次点击，会多次调用回调函数。如果您的回调函数只能执行一次，那么您需要分开跟踪回调函数（If you're callback is an action that must be completed only once, you'll need to keep track of that separately）。
代码示例
alertify.log("带回调函数标准日志消息", function(ev) {
// The click event is in the
// event variable, so you can use
// it here.
ev.preventDefault();
alertify.log("您单击了通知");
});成功日志
代码示例
alertify.success("成功日志消息");带回调函数的成功日志
代码示例
alertify.success("带回调函数的成功日志消息", function(ev) {
// The click event is in the
// event variable, so you can use
// it here.
ev.preventDefault();
alertify.success("您单击了通知");
});错误日志
代码示例
alertify.error("错误日志消息");带回调函数的错误日志
代码示例
alertify.error("带回调函数的错误日志消息", function(ev) {
// The click event is in the
// event variable, so you can use
// it here.
ev.preventDefault();
alertify.error("您单击了通知");
});单击关闭日志
代码示例
alertify
.closeLogOnClick(true)
.log("单击关闭");禁用日志的click事件
默认情况下，单击关闭日志消息功能是被禁用的，但如果您已经启用了它，并需要将其重置为禁用的话，也是非常方便的。
为什么默认要禁用单击关闭呢，主要是为了日志消息中所包含的HTML（包括链接）能被操作。
代码示例
alertify
.closeLogOnClick(true)
.log("单击关闭")
.closeLogOnClick(false)
.log("不能通过单击关闭");10 秒后隐藏
代码示例
alertify.delay(10000).log("10秒后隐藏");持续显示的日志
持续显示日志消息一直可见，直到单击（如果设置了closeLogOnClick(true)），或者当消息数量超过maxLogItems设置时移除。
代码示例
alertify.delay(0).log("一直显示直到被单击");日志消息最大数量
您可以设置日志/成功/错误消息的最大显示数量，默认为两个。
代码示例
alertify
.maxLogItems(1)
.log("这是第一个消息");
// The timeout is just for visual effect.
setTimeout(function() {
alertify.log("第二条消息显示会关闭第一条消息");
}, 1000);设置日志模板
可以为所有的日志设置模板
代码示例
alertify
.setLogTemplate(function (input) { return '日志消息：' + input; })
.log("这是一条消息");其他配置项
重置默认值
您可以改变按钮标签、延时、默认提示或者占位符等的值，同时也可以轻松重置为默认值。
代码示例
// Notice the okay button is not the custom value, it was reset.
alertify
.okBtn("前往")
.reset()
.alert("自定义值已被重置！");---- 最后更新于：2017/06/19 01:26