If you have been writing codes in JavaScript, chances are you’re already familiar with alert function or confirm function. These functions are built mainly for debugging purposes although there are instances that you can use these functions to warn users from doing certain things.
For example, you want to alert users that you have new products displayed. That could be a reason to use an alert function.
Pretty basic right?
Although if you are familiar with Bootstrap, you can just use Modals or Toasts instead.
But!
What if you don’t want to use any of that, but instead stick to javascript?
Well, luckily, there’s an available framework that you can use to effectively display alert windows, confirmation windows, or even prompt messages and that is AlertifyJS.
What is AlertifyJS
AlertifyJS is a javascript framework used for developing browser dialogs and notifications that are completely pre-designed. Unlike Bootstrap, AlertifyJS is extensible, themeable, and easy to use. You don’t have to worry about HTML and CSS. AlertifyJS will do that just for you!
Features
Usage
Currently, AlertifyJS is offering v1.12.0. If you are looking for a commercial license and want to support the developers of this framework, they also provide that for only $19.
If you prefer to use CDN, then you may copy the following code.
Keep in mind though that you only need alertify.min.js, alertify.min.css, and default.min.css or any theme CSS file you prefer.
<!-- JavaScript -->
<script src="//cdn.jsdelivr.net/npm/alertifyjs@1.12.0/build/alertify.min.js"></script>
<!-- CSS -->
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/alertifyjs@1.12.0/build/css/alertify.min.css"/>
<!-- Default theme -->
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/alertifyjs@1.12.0/build/css/themes/default.min.css"/>
<!-- Semantic UI theme -->
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/alertifyjs@1.12.0/build/css/themes/semantic.min.css"/>
<!-- Bootstrap theme -->
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/alertifyjs@1.12.0/build/css/themes/bootstrap.min.css"/>
<!--
RTL version
-->
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/alertifyjs@1.12.0/build/css/alertify.rtl.min.css"/>
<!-- Default theme -->
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/alertifyjs@1.12.0/build/css/themes/default.rtl.min.css"/>
<!-- Semantic UI theme -->
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/alertifyjs@1.12.0/build/css/themes/semantic.rtl.min.css"/>
<!-- Bootstrap theme -->
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/alertifyjs@1.12.0/build/css/themes/bootstrap.rtl.min.css"/>
Code language: HTML, XML (xml)Example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/alertifyjs@1.12.0/build/alertify.min.js"></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/alertifyjs@1.12.0/build/css/alertify.min.css"/>
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/alertifyjs@1.12.0/build/css/themes/default.min.css"/>
</head>
<body>
</body>
<script>
alertify.alert("Hello World!");
</script>
</html>
Code language: HTML, XML (xml)
Whenever you use JavaScript frameworks, it is important to always include jQuery since most frameworks rely on jQuery.
Now, it’s pretty simple? Right?
With just a few steps, you’ll be able to step up your browser dialog.
Pros and Cons
Using AlertifyJS is very easy and it will make your browser dialogs more user-friendly and browser-friendly. These are the pros that you could expect from this framework.
The only disadvantage that we can see from this framework is that it would increase your file requests. As you can see, to make everything work, you are required to pull three files.
You may think it’s not too much but it is our responsibility to make the request as small as possible for the user’s experience.
Now, you might be thinking…
Is there any way to solve this issue?
Of course! And that is to optimize the files.
You can compress these files into 2 files, one CSS and one JavaScript.
So, let’s say you have style.css and you have alertify.min.css and default.min.css or whatever theme you choose. You can just compile these stylesheets into one file. That way you would save two files!
Same goes with javascript files. If you have script.js, you can just insert the content of alertify.js into your script. Just don’t mix jQuery and alertify.
Components
What’s cool with AlertifyJS is not only you can display alert messages but you can also display confirmation dialogs with Notification at the bottom-right corner of your browser.
Confirm Dialog
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/alertifyjs@1.12.0/build/alertify.min.js"></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/alertifyjs@1.12.0/build/css/alertify.min.css"/>
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/alertifyjs@1.12.0/build/css/themes/default.min.css"/>
</head>
<body>
</body>
<script>
alertify.confirm('Please confirm this dialog', 'By clicking OK you agree to our terms and conditions', function(){ alertify.success('Accepted! Yay!') }
, function(){ alertify.error('You do not agree :(')});
</script>
</html>
Code language: HTML, XML (xml)You may have not noticed this yet but you can actually drag the dialog box. Run the code above and try to drag the dialog. Awesome right!?
Also, if you have noticed the code, you will see that you can actually extend this code into something incredible. For example, if the user clicks the OK button, you can redirect them into a new page. Or, if the user cancels the dialog box, you can display another message saying that they canceled the dialog box.
Prompt
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/alertifyjs@1.12.0/build/alertify.min.js"></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/alertifyjs@1.12.0/build/css/alertify.min.css"/>
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/alertifyjs@1.12.0/build/css/themes/default.min.css"/>
</head>
<body>
</body>
<script>
alertify.prompt( 'Who are you?', 'Please enter your name', 'Name'
, function(evt, value) { alertify.success('Nice to meet you ' + value) }
, function() { alertify.error('Sorry, we love to know who you are') });
</script>
</html>
Code language: HTML, XML (xml)Notifier
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/alertifyjs@1.12.0/build/alertify.min.js"></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/alertifyjs@1.12.0/build/css/alertify.min.css"/>
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/alertifyjs@1.12.0/build/css/themes/default.min.css"/>
</head>
<body>
</body>
<script>
var notification = alertify.notify('You have 1 new message', 'success', 5, function(){ console.log('dismissed'); });
</script>
</html>
Code language: HTML, XML (xml)Another thing that makes this framework awesome is that the notifier is stackable. You heard that right! If you try to spam click the run code button above, you will see that the notifier dialog is stacking up.
Isn’t that awesome?
Conclusion
There you have it! You can now display messages in too many ways. Not only it looks cool but it is also very easy to use.
If you have frameworks that you prefer, please don’t hesitate to share it with us. We love to know your thoughts and reactions too!
