Flash message

flash.txt

####### REQUIRE JQUERY #########

//============== USAGE EXEMPLE ===================

flash("Flash message", 'info');

//============== HTML ====================

	<div class="response">
		<h1></h1>
	</div>

//============== CSS =====================

div.response {
  display: none;
  z-index: 2000;
  position: relative;
  top: 0;
  left: 0;
  width: 100%; 
}

div.response h1 {
  font-size: 18px;
  font-weight: 500;
  color: white;
  text-align: center;
  margin: 20px 0 0 0;
  padding: 20px 0; 
  width: 100%;
}

div.response.success {
  background: #00b159; 
}
div.response.error {
  background: #d11141; 
}
div.response.info {
  background: #00a3e2; 
}
div.response.warning {
  background: #1BBC9D; 
}

//============== JS =====================

/**
 * ============ FLASH RESPONSE MESSAGE ===========
 * flash response message header
 * @param  String msg  message from bd
 * @param  status type success, error info warning
 */
function flash(msg, type){
	$('div.response h1').text(msg);

	switch (type) {
		case 'success' : 
			$('div.response').removeClass('error info warning').addClass('success');
		break;

		case 'error' :
			$('div.response').removeClass('success info warning').addClass('error');
		break;

		case 'info' :
			$('div.response').removeClass('success error warning').addClass('info');
		break;
		case 'warning' :
			$('div.response').removeClass('success error info').addClass('warning');
		break;
	}

	if($('div.response').css("display") != "block"){
		$('div.response').fadeIn(500, function(){
			setTimeout(function(){ 
			$('div.response').fadeOut(500);
			}, 4000);
		});
	}
}