How to Style Alert or Confirm Browser Dialog wit CSS

How to Style JavaScript Alert/Confirm with AlertifyJS

  HowTos

Learn how to display stylish alert box and confirmation dialog with pure javascript

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

  • Responsive for any devices
  • Themeable (Default theme, Semantic, and Bootstrap)
  • Extensible, which means you can do pretty much anything you want
  • Notifications
  • i18n and RTL Support
  • Lots more features such as Modal, MVM, Resize, Move, etc.

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/[email protected]/build/alertify.min.js"></script>

<!-- CSS -->
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/[email protected]/build/css/alertify.min.css"/>
<!-- Default theme -->
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/[email protected]/build/css/themes/default.min.css"/>
<!-- Semantic UI theme -->
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/[email protected]/build/css/themes/semantic.min.css"/>
<!-- Bootstrap theme -->
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/[email protected]/build/css/themes/bootstrap.min.css"/>

<!-- 
    RTL version
-->
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/[email protected]/build/css/alertify.rtl.min.css"/>
<!-- Default theme -->
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/[email protected]/build/css/themes/default.rtl.min.css"/>
<!-- Semantic UI theme -->
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/[email protected]/build/css/themes/semantic.rtl.min.css"/>
<!-- Bootstrap theme -->
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/[email protected]/build/css/themes/bootstrap.rtl.min.css"/>

Example

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>WeeklyHow - AlertifyJS Tutorial</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
        <script src="//cdn.jsdelivr.net/npm/[email protected]/build/alertify.min.js"></script>
        <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/[email protected]/build/css/alertify.min.css"/>
        <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/[email protected]/build/css/themes/default.min.css"/>
    </head>
    <body>
    	
    </body>
    <script>
    	alertify.alert("Hello World!");
    </script>
</html>
WeeklyHow – AlertifyJS Tutorial
AlertifyJS Example - jQuery

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">
        <title>WeeklyHow - AlertifyJS Tutorial</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
        <script src="//cdn.jsdelivr.net/npm/[email protected]/build/alertify.min.js"></script>
        <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/[email protected]/build/css/alertify.min.css"/>
        <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/[email protected]/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>
WeeklyHow – AlertifyJS Tutorial

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">
        <title>WeeklyHow - AlertifyJS Tutorial</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
        <script src="//cdn.jsdelivr.net/npm/[email protected]/build/alertify.min.js"></script>
        <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/[email protected]/build/css/alertify.min.css"/>
        <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/[email protected]/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>
WeeklyHow – AlertifyJS Tutorial

Notifier

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>WeeklyHow - AlertifyJS Tutorial</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
        <script src="//cdn.jsdelivr.net/npm/[email protected]/build/alertify.min.js"></script>
        <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/[email protected]/build/css/alertify.min.css"/>
        <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/[email protected]/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>
WeeklyHow – AlertifyJS Tutorial

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!

React to this topic
Bernard Polidario
About Bernard Polidario

A full-stack developer who has been around programming community for 10+ years and still has a lot of passion for programming and design. I am the founder of WeeklyHow and I can be reached at [email protected]

https://weeklyhow.com

Leave a Reply

Your email address will not be published. Required fields are marked *

*
*
*