Develop user friendly alerts in jQuery css

We have need the alerts popup to show user friendly alerts and message popup instead a annoying browser alert(‘hhah’); because somehow this javascript alert annoying user and and won’t allow to do anything like go to another tab or scroll down of page until user click on OK or cancel alert popup, so here I have posted a tutorial to create user friendly alert and colorful alert types.

body{
	font-family:Verdana, Arial;
}

.jscss_alerts{
	background: rgba(0, 0, 0, 0.59);
	position: fixed;
	top: 10px;
	right: 10px;
	margin: 0px;
	padding: 5px;
	font-size:13px;
	z-index:99999999;
}

.jscss_alerts .alert_li{
	list-style: none;
	margin: 5px 2px;
	padding: 7px 5px;
}
.jscss_alerts .alert_li:hover{
	cursor:pointer;
}

.jscss_alerts .alert_li.jscss_success{
	background-image: -webkit-linear-gradient(#53B80C,#4BAE05);
	color: #1F4803;
}
.jscss_alerts .alert_li.jscss_error{
	background-image: -webkit-linear-gradient(#FF1B1B,#F00);
	color: #9F0000;
}
.jscss_alerts .alert_li.jscss_info{
	background-image: -webkit-linear-gradient(#87CEEB,#87CEEB);
	color: #10678A;
}
.jscss_alerts .alert_li.jscss_warning{
	background-image: -webkit-linear-gradient(#FFD700,#FFD700);
	color: #726000;
}
.jscss_alerts .alert_li strong{
	margin-right:5px;
}

Here is Javascript steps are started

1.First create variable for function because this function is global

function to easily access call it in jQuery-ajax api in functions or custom events because a simple create function cannot easily called.
This function have four parameters, The first, second and third parameters are required, and fourth parameter is option

1. alertype, eg error, warning, info, success
2. alert_msg parameter is used for to show message eg, type valid email, congratulation your registration completed, login successed and redired to …
3. alert_class parameter is used for to identify the alert.
4. close_time is optional parameter this in this parameter you will pass time of stay alert eg 1000 for 1 second if you passed 1000 the message will be hide and removed from popup area after 1 second.

var open_jscssalert;
window.open_jscssalert, open_jscssalert = function (alerttype,alert_msg,alert_class,close_time){}

2.Verify first second and third parameter must be not undefined

Because if we won’t check if first parameter is undefined then it javascript thrown an error undefined variable, same thing happen in second and third variable.

if(typeof alerttype !=='undefined' && typeof alert_msg!=='undefined' && alert_class!='undefined'){
}

3.Remove the last error message

We must need to remove last alert if new alert called because if we cannot remove the alert it will be make duplication, eg we are using ajax to show alert with info and text loading then call again function on success ajax to show success message then they will show twice.
But note this will override the last message when you a user many clicks on a button and on button click event ajax called. So in this logical you need to add a random_class select like random_class = ‘save_changes_ajax’+Math.random().toString().substr(2,10); //it will return your text with random numbers save_changes_ajax9776382471

$("."+alert_class).remove();

4.Define html of alert message

var alert_html = '
	<li data-alert_class="'+alert_class+'" class="'+alert_class+' alert_li jscss_'+alerttype+'" title="Click to close"><strong>'+alerttype+'</strong>'+alert_msg+'</li>
';

5.Check if alert area available or not

This step is we check if alert area exists or not because if alert area exists we will just add only alert colorful box, and if area not exists then we will add area html and alert html append to body tag and then we hide and fadeIn to highlight the popup it look new a popup

		var ele_exists = $(".jscss_alerts");
		var ele_exists_tag = ele_exists.prop('tagName');

		if(typeof ele_exists_tag!=='undefined'){
			ele_exists.prepend(alert_html);
		} else {
			var alert_html = '
<ul class="jscss_alerts">'+alert_html+'</ul>
';
			$("body").append(alert_html);
		}
		$("."+alert_class).hide().fadeIn(400);

6. set Timeout event in array setimeoutpopups variable to close given popup

First we check if setimeoutpopups variable is undefined and then we set it as array, Check it in if passed class exists in this array then we call clearTimeout to clear specified setTimeout, We are doing this step because we need multiple timeout function for each single alert, and close_jscssalert() function defined in step 7

		if(alert_class in setimeoutpopups){
			clearTimeout( setimeoutpopups[alert_class]);
			close_jscssalert(alert_class);
		}

7.set timeout if passed in parameter

In this step we check if !NaN() means if ! means not and NaN Not a number store another timeout in setimeoutpopups for remove the alert message after close_time

		if(!isNaN(close_time)){
			setimeoutpopups[alert_class] = setTimeout(function (){
				close_jscssalert(alert_class);
			},close_time);
		}

8. Define function close_jscssalert with a single parameter of class selector

Define this function same like as in open_jscssalert, in this function we Fadeout the message of given class then we remove message li after complete animation and then we check it if no li of html exists in popupbox it should remove the complete popup box otherwise it will be shown in little empty area size.

var close_jscssalert;
window.close_jscssalert,close_jscssalert = function (alert_class){
	$("."+alert_class).fadeOut(400,function (){
		$("."+alert_class).remove();
		var alerts_length = $('.jscss_alerts').find('li').length;
		if(alerts_length==0){
			$('.jscss_alerts').remove();
		}
	});
}

Now call function on click event on message to remove the message

If user want to remove it to click on message

$('body').delegate('.jscss_alerts > li','click', function (){
	var this_li_ele =$(this);
	var popup_classsel = this_li_ele.attr('data-alert_class');
	close_jscssalert(popup_classsel);
});

Here is complete code of Loading popup

If something you have missed in above step you can compare your code with the full code.

$(document).ready(function(){
	var open_jscssalert;
	window.open_jscssalert, open_jscssalert = function (alerttype,alert_msg,alert_class,close_time){
		if(typeof alerttype !=='undefined' && typeof alert_msg!=='undefined' && alert_class!='undefined'){
			$("."+alert_class).remove();
			var alert_html = '<li data-alert_class="'+alert_class+'" class="'+alert_class+' alert_li jscss_'+alerttype+'" title="Click to close"><strong>'+alerttype+'</strong>'+alert_msg+'</li>';
			var ele_exists = $(".jscss_alerts");
			var ele_exists_tag = ele_exists.prop('tagName');
			if(typeof ele_exists_tag!=='undefined'){
				ele_exists.prepend(alert_html);
			} else {
				var alert_html = '<ul class="jscss_alerts">'+alert_html+'</ul>';
				$("body").append(alert_html);
			}
			$("."+alert_class).hide().fadeIn(400);
			if(typeof setimeoutpopups ==='undefined'){
				var setimeoutpopups = [];
			}
			if(alert_class in setimeoutpopups){
				clearTimeout( setimeoutpopups[alert_class]);
				close_jscssalert(alert_class);
			}
			if(!isNaN(close_time)){
				setimeoutpopups[alert_class] = setTimeout(function (){
					close_jscssalert(alert_class);
				},close_time);
			}
		}
	}

	var close_jscssalert;
	window.close_jscssalert,close_jscssalert = function (alert_class){
		$("."+alert_class).fadeOut(400,function (){
			$("."+alert_class).remove();
			var alerts_length = $('.jscss_alerts').find('li').length;
			if(alerts_length==0){
				$('.jscss_alerts').remove();
			}
		});
	}

	$('body').delegate('.jscss_alerts > li','click', function (){
		var this_li_ele =$(this);
		var popup_classsel = this_li_ele.attr('data-alert_class');
		close_jscssalert(popup_classsel);
	});
});