jQuery prompt plug-in alertify usage guide_jquery

1.alertify plug-in function

Mainly implements the prompt function, which is used to replace alert, confirm, prompt in js and display a friendly prompt box

2. How to use alertify

1. Files used
Mainly use three files and two css (alertify.core.css, alertify.default.css) to set the style of the prompt box. A js (alertify.min.js or alertify.js), used to implement the function of the prompt box.

2. Implement prompt box code
Alertify is very simple to use. The main steps are: initialization (initialize alertify) -> binding (binding event)

Such as implementing simple prompt boxes, confirmation boxes and prompt boxes

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;
};

Display results (input prompt box):

4.alertify modify style
It mainly modifies two css files (alertify.core.css, alertify.default.css), which can also be overwritten. If you add

to the page

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

Display the result after modification:

alertify usage instructions

alertify is a plug-in developed by html5 css3, so it perfectly supports html5 css3 browsers. During the testing process, the display effect of alertify is perfect in Chrome and Firefox browsers, but in IE8, the display effect is different, such as rounded corners, shadows, animated special effects, etc. will not be displayed.

The above is the entire content of this article, I hope you all like it.