Dialog or Alert boxes looked so good with Alertifyjs
Posted By : Vijendra Kumar | 30-Jun-2015
Alertify is small library for creating good Dialog (Alert) boxes or windows and notifications. It is quite easy to customize this with CSS and doesn’t depend on third party libraries. To make it work, include the js file and call the methods of alertify object. Is is have Cross-browser and platform support.
---------------- Setup ----------------
Download the package from:
https://github.com/fabien-d/alertify.js/archive/0.3.11.zip
---------------- Usage ----------------
Insert into HTML
Include JS
<!-- ideally at the bottom of the page -->
<!-- also works in the <head> -->
<script src="PATH_TO_FILE/alertify.min.js"></script>
Include CSS
<!-- include the core styles -->
<link rel="stylesheet" href="PATH_TO_FILE/alertify.css" />
<!-- include a theme, can be included into the core instead of 2 separate files -->
<link rel="stylesheet" href="PATH_TO_FILE/alertify.default.css" />
------------ Default Usage ------------
Default dialogs
// alert dialog
alertify.alert("Message");
// confirm dialog
alertify.confirm("Message", function (e) {
if (e) {
// user clicked "ok"
} else {
// user clicked "cancel"
}
});
// prompt dialog
alertify.prompt("Message", function (e, str) {
// str is the input text
if (e) {
// user clicked "ok"
} else {
// user clicked "cancel"
}
}, "Default Value");
Default notifications
// standard notification
// setting the wait property to 0 will
// keep the log message until it's clicked
alertify.log("Notification", type, wait);
// success notification
// shorthand for alertify.log("Notification", "success");
alertify.success("Success notification");
// error notification
// shorthand for alertify.log("Notification", "error");
alertify.error("Error notification");
For more information of customization properties, custom notification, custom themes go to this plugins home page.
THANKS
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
Vijendra Kumar
Vijendra is a creative UI developer with experience and capabilities to build compelling UI designs for Web and Mobile Applications. Vijendra likes playing video games and soccer.