CSS Notification Message Alert Boxes with Popup Animation

Notification messages can be used to inform the user something special like an error, success, and warning, etc. Today, we will build CSS notification message alert boxes that works with the button when clicked.

Here, we’ll create four different types of alert boxes by using of jQuery and CSS. A few days ago, I published similar article about alert box design. You can also check it.

It is important that each notification message should appear in a different color along with the different text. That allows to user to know what particular issue so he can take action accordingly.

Each web application should have these four message types warning, information, successful, and error. Each message kind has to provide in a particular color and exceptional icon. A particular message type represents validation messages.

I will show you a remake of CSS Notification Message that I used on my today’s assignment. I modified them barely just to cause them to simpler for this case.

In my previous article, I had to show you some beautiful Colorful design of notification boxes styles that show you some idea about what type of message should have what kind of color.

To remind you, I have written a small article about how to make notification badge with Animation which can also use in web application.

Now when we recognize the way to present messages to users, let’s examine how to put into effect it the usage of CSS. Allow’s take a quick have a look at the layout procedure.

How to Create CSS Notification Message Alert Boxes

I can hold this as easy as I’m able to. The aim is to have a single div that implements a single CSS magnificence. It’s our main container for notification messages, and we will use jQuery to handle this.

So the HTML markup will seem like this:

<div id="notification-container"></div>

Additionally, We need to create a different button for each notification message. When a user clicks one of this button, the message will show up according to that button.

<div class="notiBtn">
    <button id="success-btn">Success</button>
    <button id="error-btn">Error</button>
    <button id="info-btn">Info</button>
    <button id="warning-btn">Warning</button>
</div>

The CSS Styling

I am not going to explain you all general styling here but don’t worry you will find them in the demo and download source code. The thing need to explain here is notification container that should be to right and we will use position absolute

#notification-container {
    display: block;
    position: absolute;
    top: 10px;
    right: 10px;
}

The jQuery

We created different JavaScript functions to handle notification message box. We will define some variables that handle the other functions.

var notification;
var container = document.querySelector('#notification-container');
var visible = false;
var queue = [];

In the first function, createNotification we will create elements.

function createNotification() {
	notification = document.createElement('div');
    var btn = document.createElement('button');
    var title = document.createElement('div');
    var msg = document.createElement('div');
    btn.className = 'notification-close';
    title.className = 'notification-title';
    msg.className = 'notification-message';
    btn.addEventListener('click', hideNotification, false);
    notification.addEventListener('animationend', hideNotification, false);
    notification.addEventListener('webkitAnimationEnd', hideNotification, false);
    notification.appendChild(btn);
    notification.appendChild(title);
    notification.appendChild(msg);
}

Next, we will update the notification with type, title, and message. The function showNotification will show these types. At the end, we will just hide them.

function updateNotification(type, title, message) {
    notification.className = 'notification notification-' + type;
    notification.querySelector('.notification-title').innerHTML = title;
    notification.querySelector('.notification-message').innerHTML = message;
}

function showNotification(type, title, message) {
    if (visible) {
        queue.push([type, title, message]);
        return;
    }
    if (!notification) {
        createNotification();
    }
    updateNotification(type, title, message);
    container.appendChild(notification);
    visible = true;
}

function hideNotification() {
    if (visible) {
        visible = false;
        container.removeChild(notification);
        if (queue.length) {
            showNotification.apply(null, queue.shift());
        }
    } 
}

We used querySelector with each button and added Event Listener to show the message on click. The function showNotification should also bind with the jQuery event listener.

document.querySelector('#success-btn').addEventListener('click', showNotification.bind(null, 'success', 'Success!', 'Your request was completed successfully.'), false);
			document.querySelector('#error-btn').addEventListener('click', showNotification.bind(null, 'error', 'Error!', 'Your request did not complete successfully.'), false);
			document.querySelector('#info-btn').addEventListener('click', showNotification.bind(null, 'info', 'Information', 'Don\'t forget to checkout the new features'), false);
			document.querySelector('#warning-btn').addEventListener('click', showNotification.bind(null, 'warning', 'Warning!', 'Your battery is running low.'), false);