alertify、js、css 使用简介

Alertify.js which helped me resolve my issues regarding prompts, alerts, confirms, etc in iOS7.

1.alertify插件功能

主要实现提示功能，用于代替js中的alert,confirm,prompt，显示友好的提示框

2.alertify使用方法

1.使用的文件
主要使用三个文件，两个css（alertify.core.css，alertify.default.css），用于设置提示框的样式。一个js（alertify.min.js或alertify.js），用于实现提示框的功能。

2.实现提示框代码
alertify使用非常简单，主要步骤为：初始化（初始化alertify）-》绑定(绑定事件)

如实现简单的提示框、确认框和提示框

var
$ = function (id) {
  return document.getElementById(id);
},
//初始化操作
reset = function () {
  alertify.set({
    labels : {
      ok   : "确认",
      cancel : "取消"
    },
    delay : 5000,
    buttonReverse : false,
    buttonFocus  : "ok"
  });
};
//绑定
$("alert").onclick = function () {
   reset();
   alertify.alert("提示框");
   return false;
};
//绑定
$("confirm").onclick = function () {
   reset();
   alertify.confirm("确认框", function (e) {
     if (e) {
       alertify.success("点击确认");
     } else {
       alertify.error("点击取消");
     }
   });
   return false;
};
//绑定
$("prompt").onclick = function () {
  reset();
  alertify.prompt("提示输入框", function (e, str) {
    if (e) {
      alertify.success("点击确认，输入内容为: " + str);
    } else {
      alertify.error("点击取消");
    }
  }, "默认值");
  return false;
};

显示结果(输入提示框)：

4.alertify修改样式
主要是修改两个css文件(alertify.core.css，alertify.default.css)，也可以覆盖使用。如在页面中加入

.alertify{
  width:350px;
  margin-left: -205px;
  border:2px solid #4ba9e6;
  background:#f3faff;
  border-radius:0;
}

修改后显示结果：

alertify使用说明

alertify是由html5+css3开发的插件，所以完美的支持html5+css3的浏览器。在测试过程过，alertify在chrome与火狐浏览器中显示效果是完美的，但是在ie8一下，显示效果有所不同，如圆角框、阴影、动画特效等不会显示。

alertify.js

/**
 * alertify
 * An unobtrusive customizable JavaScript notification system
 *
 * @author Fabien Doiron <[email protected]>
 * @copyright Fabien Doiron 2013
 * @license MIT <http://opensource.org/licenses/mit-license.php>
 * @link http://fabien-d.github.com/alertify.js/
 * @module alertify
 * @version 0.3.8
 */
(function(e,t){"use strict";var n=e.document,r;r=function(){var r={},i={},s=!1,o={ENTER:13,ESC:27,SPACE:32},u=[],a,f,l,c,h,p,d,v,m,g,y,b;return i={buttons:{holder:‘<nav class="alertify-buttons">{{buttons}}</nav>‘,submit:‘<button type="submit" class="alertify-button alertify-button-ok" id="alertify-ok">{{ok}}</button>‘,ok:‘<a href="#" class="alertify-button alertify-button-ok" id="alertify-ok">{{ok}}</a>‘,cancel:‘<a href="#" class="alertify-button alertify-button-cancel" id="alertify-cancel">{{cancel}}</a>‘},input:‘<div class="alertify-text-wrapper"><input type="text" class="alertify-text" id="alertify-text"></div>‘,message:‘<p class="alertify-message">{{message}}</p>‘,log:‘<article class="alertify-log{{class}}">{{message}}</article>‘},b=function(){var e,r=n.createElement("fakeelement"),i={WebkitTransition:"webkitTransitionEnd",MozTransition:"transitionend",OTransition:"otransitionend",transition:"transitionend"};for(e in i)if(r.style[e]!==t)return i[e]},a=function(e){return n.getElementById(e)},r={labels:{ok:"OK",cancel:"Cancel"},delay:5e3,buttonReverse:!1,buttonFocus:"ok",transition:t,addListeners:function(e){var t=typeof l!="undefined",r=typeof f!="undefined",i=typeof y!="undefined",s="",u=this,a,h,p,d,v;a=function(t){return typeof t.preventDefault!="undefined"&&t.preventDefault(),p(t),typeof y!="undefined"&&(s=y.value),typeof e=="function"&&(typeof y!="undefined"?e(!0,s):e(!0)),!1},h=function(t){return typeof t.preventDefault!="undefined"&&t.preventDefault(),p(t),typeof e=="function"&&e(!1),!1},p=function(e){u.hide(),u.unbind(n.body,"keyup",d),u.unbind(c,"focus",v),i&&u.unbind(g,"submit",a),t&&u.unbind(l,"click",a),r&&u.unbind(f,"click",h)},d=function(e){var t=e.keyCode;t===o.SPACE&&!i&&a(e),t===o.ESC&&r&&h(e)},v=function(e){i?y.focus():r?f.focus():l.focus()},this.bind(c,"focus",v),t&&this.bind(l,"click",a),r&&this.bind(f,"click",h),this.bind(n.body,"keyup",d),i&&this.bind(g,"submit",a),typeof this.transition=="undefined"&&this.setFocus()},bind:function(e,t,n){typeof e.addEventListener=="function"?e.addEventListener(t,n,!1):e.attachEvent&&e.attachEvent("on"+t,n)},handleErrors:function(){if(typeof e.onerror!="undefined"){var t=this;return e.onerror=function(e,n,r){t.error("["+e+" on line "+r+" of "+n+"]",0)},!0}return!1},appendButtons:function(e,t){return this.buttonReverse?t+e:e+t},build:function(e){var t="",n=e.type,s=e.message,o=e.cssClass||"";t+=‘<div class="alertify-dialog">‘,r.buttonFocus==="none"&&(t+=‘<a href="#" id="alertify-noneFocus" class="alertify-hidden"></a>‘),n==="prompt"&&(t+=‘<form id="alertify-form">‘),t+=‘<article class="alertify-inner">‘,t+=i.message.replace("{{message}}",s),n==="prompt"&&(t+=i.input),t+=i.buttons.holder,t+="</article>",n==="prompt"&&(t+="</form>"),t+=‘<a id="alertify-resetFocus" class="alertify-resetFocus" href="#">Reset Focus</a>‘,t+="</div>";switch(n){case"confirm":t=t.replace("{{buttons}}",this.appendButtons(i.buttons.cancel,i.buttons.ok)),t=t.replace("{{ok}}",this.labels.ok).replace("{{cancel}}",this.labels.cancel);break;case"prompt":t=t.replace("{{buttons}}",this.appendButtons(i.buttons.cancel,i.buttons.submit)),t=t.replace("{{ok}}",this.labels.ok).replace("{{cancel}}",this.labels.cancel);break;case"alert":t=t.replace("{{buttons}}",i.buttons.ok),t=t.replace("{{ok}}",this.labels.ok);break;default:}return v.className="alertify alertify-show alertify-"+n+" "+o,d.className="alertify-cover",t},close:function(e,t){var n=t&&!isNaN(t)?+t:this.delay,r=this,i,s;this.bind(e,"click",function(){i(e)}),s=function(e){e.stopPropagation(),r.unbind(this,r.transition,s),m.removeChild(this),m.hasChildNodes()||(m.className+=" alertify-logs-hidden")},i=function(e){typeof e!="undefined"&&e.parentNode===m&&(typeof r.transition!="undefined"?(r.bind(e,r.transition,s),e.className+=" alertify-log-hide"):(m.removeChild(e),m.hasChildNodes()||(m.className+=" alertify-logs-hidden")))};if(t===0)return;setTimeout(function(){i(e)},n)},dialog:function(e,t,r,i,o){p=n.activeElement;var a=function(){if(v&&v.scrollTop!==null)return;a()};if(typeof e!="string")throw new Error("message must be a string");if(typeof t!="string")throw new Error("type must be a string");if(typeof r!="undefined"&&typeof r!="function")throw new Error("fn must be a function");return typeof this.init=="function"&&(this.init(),a()),u.push({type:t,message:e,callback:r,placeholder:i,cssClass:o}),s||this.setup(),this},extend:function(e){if(typeof e!="string")throw new Error("extend method must have exactly one paramter");return function(t,n){return this.log(t,e,n),this}},hide:function(){var e,t=this;u.splice(0,1),u.length>0?this.setup():(s=!1,e=function(n){n.stopPropagation(),v.className+=" alertify-isHidden",t.unbind(v,t.transition,e)},typeof this.transition!="undefined"?(this.bind(v,this.transition,e),v.className="alertify alertify-hide alertify-hidden"):v.className="alertify alertify-hide alertify-hidden alertify-isHidden",d.className="alertify-cover alertify-cover-hidden",p.focus())},init:function(){n.createElement("nav"),n.createElement("article"),n.createElement("section"),d=n.createElement("div"),d.setAttribute("id","alertify-cover"),d.className="alertify-cover alertify-cover-hidden",n.body.appendChild(d),v=n.createElement("section"),v.setAttribute("id","alertify"),v.className="alertify alertify-hidden",n.body.appendChild(v),m=n.createElement("section"),m.setAttribute("id","alertify-logs"),m.className="alertify-logs alertify-logs-hidden",n.body.appendChild(m),n.body.setAttribute("tabindex","0"),this.transition=b(),delete this.init},log:function(e,t,n){var r=function(){if(m&&m.scrollTop!==null)return;r()};return typeof this.init=="function"&&(this.init(),r()),m.className="alertify-logs",this.notify(e,t,n),this},notify:function(e,t,r){var i=n.createElement("article");i.className="alertify-log"+(typeof t=="string"&&t!==""?" alertify-log-"+t:""),i.innerHTML=e,m.insertBefore(i,m.firstChild),setTimeout(function(){i.className=i.className+" alertify-log-show"},50),this.close(i,r)},set:function(e){var t;if(typeof e!="object"&&e instanceof Array)throw new Error("args must be an object");for(t in e)e.hasOwnProperty(t)&&(this[t]=e[t])},setFocus:function(){y?(y.focus(),y.select()):h.focus()},setup:function(){var e=u[0],n=this,i;s=!0,i=function(e){e.stopPropagation(),n.setFocus(),n.unbind(v,n.transition,i)},typeof this.transition!="undefined"&&this.bind(v,this.transition,i),v.innerHTML=this.build(e),c=a("alertify-resetFocus"),l=a("alertify-ok")||t,f=a("alertify-cancel")||t,h=r.buttonFocus==="cancel"?f:r.buttonFocus==="none"?a("alertify-noneFocus"):l,y=a("alertify-text")||t,g=a("alertify-form")||t,typeof e.placeholder=="string"&&e.placeholder!==""&&(y.value=e.placeholder),this.addListeners(e.callback)},unbind:function(e,t,n){typeof e.removeEventListener=="function"?e.removeEventListener(t,n,!1):e.detachEvent&&e.detachEvent("on"+t,n)}},{alert:function(e,t,n){return r.dialog(e,"alert",t,"",n),this},confirm:function(e,t,n){return r.dialog(e,"confirm",t,"",n),this},extend:r.extend,init:r.init,log:function(e,t,n){return r.log(e,t,n),this},prompt:function(e,t,n,i){return r.dialog(e,"prompt",t,n,i),this},success:function(e,t){return r.log(e,"success",t),this},error:function(e,t){return r.log(e,"error",t),this},set:function(e){r.set(e)},labels:r.labels,debug:r.handleErrors}},typeof define=="function"?define([],function(){return new r}):typeof e.alertify=="undefined"&&(e.alertify=new r)})(this);

alertify.css

.alertify-show,
.alertify-log {
    -webkit-transition: all 500ms cubic-bezier(0.175, 0.885, 0.320, 1);
 /* older webkit */
    -webkit-transition: all 500ms cubic-bezier(0.175, 0.885, 0.320, 1.275);
    -moz-transition: all 500ms cubic-bezier(0.175, 0.885, 0.320, 1.275);
    -ms-transition: all 500ms cubic-bezier(0.175, 0.885, 0.320, 1.275);
    -o-transition: all 500ms cubic-bezier(0.175, 0.885, 0.320, 1.275);
    transition: all 500ms cubic-bezier(0.175, 0.885, 0.320, 1.275);
 /* easeOutBack */
}

.alertify-hide {
    -webkit-transition: all 250ms cubic-bezier(0.600, 0, 0.735, 0.045);
 /* older webkit */
    -webkit-transition: all 250ms cubic-bezier(0.600, -0.280, 0.735, 0.045);
    -moz-transition: all 250ms cubic-bezier(0.600, -0.280, 0.735, 0.045);
    -ms-transition: all 250ms cubic-bezier(0.600, -0.280, 0.735, 0.045);
    -o-transition: all 250ms cubic-bezier(0.600, -0.280, 0.735, 0.045);
    transition: all 250ms cubic-bezier(0.600, -0.280, 0.735, 0.045);
 /* easeInBack */
}

.alertify-log-hide {
    -webkit-transition: all 500ms cubic-bezier(0.600, 0, 0.735, 0.045);
 /* older webkit */
    -webkit-transition: all 500ms cubic-bezier(0.600, -0.280, 0.735, 0.045);
    -moz-transition: all 500ms cubic-bezier(0.600, -0.280, 0.735, 0.045);
    -ms-transition: all 500ms cubic-bezier(0.600, -0.280, 0.735, 0.045);
    -o-transition: all 500ms cubic-bezier(0.600, -0.280, 0.735, 0.045);
    transition: all 500ms cubic-bezier(0.600, -0.280, 0.735, 0.045);
 /* easeInBack */
}

.alertify-cover {
    position: fixed;
    z-index: 99999;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.alertify-cover-hidden {
    display: none;
}

.alertify {
    position: fixed;
    z-index: 99999;
    top: 50px;
    left: 50%;
    width: 550px;
    margin-left: -275px;
    opacity: 1;
}

.alertify-hidden {
    -webkit-transform: translate(0,-150px);
    -moz-transform: translate(0,-150px);
    -ms-transform: translate(0,-150px);
    -o-transform: translate(0,-150px);
    transform: translate(0,-150px);
    opacity: 0;
    display: none;
}
  /* overwrite display: none; for everything except IE6-8 */
:root *> .alertify-hidden {
    display: block;
}

.alertify-logs {
    position: fixed;
    z-index: 5000;
    bottom: 10px;
    right: 10px;
    width: 300px;
}

.alertify-logs-hidden {
    display: none;
}

.alertify-log {
    display: block;
    margin-top: 10px;
    position: relative;
    right: -300px;
    opacity: 0;
}

.alertify-log-show {
    right: 0;
    opacity: 1;
}

.alertify-log-hide {
    -webkit-transform: translate(300px, 0);
    -moz-transform: translate(300px, 0);
    -ms-transform: translate(300px, 0);
    -o-transform: translate(300px, 0);
    transform: translate(300px, 0);
    opacity: 0;
}

.alertify-dialog {
    padding: 25px;
}

.alertify-resetFocus {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.alertify-inner {
    text-align: center;
}

.alertify-text {
    margin-bottom: 15px;
    width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    font-size: 100%;
}

.alertify-buttons {
}

.alertify-button,
      .alertify-button:hover,
      .alertify-button:active,
      .alertify-button:visited {
    background: none;
    text-decoration: none;
    border: none;
        /* line-height and font-size for input button */
    line-height: 1.5;
    font-size: 100%;
    display: inline-block;
    cursor: pointer;
    margin-left: 5px;
}

.alertify-isHidden {
    visibility: hidden;
}

@media only screen and (max-width: 680px) {
    .alertify,
  .alertify-logs {
        width: 90%;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

    .alertify {
        left: 5%;
        margin: 0;
    }
}

/**
 * Default Look and Feel
 */
.alertify,
.alertify-log {
    font-family: sans-serif;
}

.alertify {
    background: #FFF;
    border: 10px solid #333;
 /* browsers that don‘t support rgba */
  border: 10px solid rgba(0,0,0,.7);
  border-radius: 8px;
  box-shadow: 0 3px 3px rgba(0,0,0,.3);
  -webkit-background-clip: padding;     /* Safari 4? Chrome 6? */
     -moz-background-clip: padding;     /* Firefox 3.6 */
          background-clip: padding-box; /* Firefox 4, Safari 5, Opera 10, IE 9 */
}
  .alertify-text {
    border: 1px solid #CCC;
    padding: 10px;
    border-radius: 4px;
  }
  .alertify-button {
    border-radius: 4px;
    color: #FFF;
    font-weight: bold;
    padding: 6px 15px;
    text-decoration: none;
    text-shadow: 1px 1px 0 rgba(0,0,0,.5);
    box-shadow: inset 0 1px 0 0 rgba(255,255,255,.5);
    background-image: -webkit-linear-gradient(top, rgba(255,255,255,.3), rgba(255,255,255,0));
    background-image:    -moz-linear-gradient(top, rgba(255,255,255,.3), rgba(255,255,255,0));
    background-image:     -ms-linear-gradient(top, rgba(255,255,255,.3), rgba(255,255,255,0));
    background-image:      -o-linear-gradient(top, rgba(255,255,255,.3), rgba(255,255,255,0));
    background-image:         linear-gradient(top, rgba(255,255,255,.3), rgba(255,255,255,0));
  }
  .alertify-button:hover,
  .alertify-button:focus {
    outline: none;
    background-image: -webkit-linear-gradient(top, rgba(0,0,0,.1), rgba(0,0,0,0));
    background-image:    -moz-linear-gradient(top, rgba(0,0,0,.1), rgba(0,0,0,0));
    background-image:     -ms-linear-gradient(top, rgba(0,0,0,.1), rgba(0,0,0,0));
    background-image:      -o-linear-gradient(top, rgba(0,0,0,.1), rgba(0,0,0,0));
    background-image:         linear-gradient(top, rgba(0,0,0,.1), rgba(0,0,0,0));
  }
  .alertify-button:focus {
    box-shadow: 0 0 15px #2B72D5;
  }
  .alertify-button:active {
    position: relative;
    box-shadow: inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05);
  }
    .alertify-button-cancel,
    .alertify-button-cancel:hover,
    .alertify-button-cancel:focus {
      background-color: #FE1A00;
      border: 1px solid #D83526;
    }
    .alertify-button-ok,
    .alertify-button-ok:hover,
    .alertify-button-ok:focus {
      background-color: #5CB811;
      border: 1px solid #3B7808;
    }

.alertify-log {
  background: #1F1F1F;
  background: rgba(0,0,0,.9);
  padding: 15px;
  border-radius: 4px;
  color: #FFF;
  text-shadow: -1px -1px 0 rgba(0,0,0,.5);
}
  .alertify-log-error {
    background: #FE1A00;
    background: rgba(254,26,0,.9);
  }
  .alertify-log-success {
    background: #5CB811;
    background: rgba(92,184,17,.9);
  }