jquery hints Plugin alertify usage guide

Source: Internet
Author: User
Tags bind reset

jquery Hints Plugin alertify usage guide

Alertifyjs is a non-intrusive, customizable JavaScript notification component. Includes customizable dialog boxes, and lower-right message pop-up boxes. Fully customizable alerts, confirmation and prompt dialogs, fully customizable notification systems, callback parameter handling including "OK" and "Cancel" button clicks, allow dialog boxes to queue

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


1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26-27--28 29---30 31--32 33 34 35 36 37 38-39 40 41 42 45 46 var $ = function (ID) {return document.getElementById (ID);},//initialize 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"); Binding $ ("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 and the input is: "+ 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


1 2 3 4 5 6 7 . 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.

Related Article

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.