jquery hints Plugin alertify use guide _jquery

1.alertify plug-in function

The main implementation of the hint function, to replace the alert,confirm,prompt in JS, display a friendly prompt box

2.alertify Use method

1. The documents used
Mainly uses three files, two CSS (ALERTIFY.CORE.CSS,ALERTIFY.DEFAULT.CSS), to set the style of the hint box. A JS (alertify.min.js or Alertify.js) that implements the function of the prompt box.

2. Implement the Hint box code
Alertify use is very simple, the main step is: initialization (initialization alertify)-binding (binding event)

If you implement a simple prompt box, confirmation box, and Prompt box

var
$ = function (ID) {return
  document.getElementById (ID);
},
//init operation
reset = function () {
  Alertify.set ({
    Labels: {
      OK   : "Confirm",
      Cancel: "Cancel"
    },
    delay:5000,
    buttonreverse: False,
    Buttonfocus  : "OK"
  });
Bind
$ ("alert"). onclick = function () {
   reset ();
   Alertify.alert ("cue box");
   return false;
Bind
$ ("confirm"). onclick = function () {
   reset ();
   Alertify.confirm ("Confirm Box", function (e) {
     if (e) {
       alertify.success ("click OK");
     } else {
       alertify.error ("click Cancel");
     }
   )
   ; return false;
Bind
$ ("prompt"). onclick = function () {
  reset ();
  Alertify.prompt ("Prompt input Box", function (e, str) {
    if (e) {
      alertify.success ("Click OK, enter as:" + str);
    } else {
      alertify.error ("click Cancel");
    }
  , "Default value")
  ; return false;

Show results (enter balloon):

4.alertify Modify Style
The main is to modify two CSS files (alertify.core.css,alertify.default.css), you can also overwrite the use. If you include in the page

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

Show results after modification:

Alertify Use instructions

Alertify is a plugin developed by HTML5+CSS3, so the perfect support for HTML5+CSS3 browsers. In the test process, alertify in the Chrome and Firefox browser to display the effect is perfect, but in IE8, the display effect is different, such as rounded corners, shadows, animation effects, etc. will not be displayed.

The above mentioned is the entire content of this article, I hope you can enjoy.