Error and success CSS message boxes 004

A great css message boxes for error, success, info and warning, with title ,icon and great border style. I make a flexible and movable message box so you can drag it anywhere using jQuery, finally I added a close button at the corner, I also support this subject with php programming to make a simple function message box.

Source code:

you can download the full project source code with icons, message_box_004.rar.
I use this site to get icons for my work, veryicon.com you can get more icons there.

CSS code:

a simple great style for the message box, with movable position change mouse cursor by cursor: move; I leave the width and position {top and left} for using them later by HTML so I can make several message boxes each one with its own attributes, the general shape is fixed for all message types, only background and border color title color and icon change depend on the chosen class for the message type.

/***********************************************************************
http://function-code.blogspot.com/2012/12/css-message-boxes-for-different-types.html
My code is free to use, but not free to republish
************************************************************************/
.message_box_004{
 opacity: 1;
 cursor: move;
 position: absolute;
 color: #222222;
 font: 13px "Arial","Helvetica",sans-serif;
 padding: 12px;
 z-index: 983;
 font-family: inherit;
 font-size: 100%;
 font-style: inherit;
 font-weight: inherit;
 margin: 0;
 vertical-align: baseline;
 -moz-box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
 -moz-border-radius: 6px 6px 6px 6px;
 }

.msg_004_close_div{
 top: 0;
 left: 0;
 position: absolute;
 width: 100%;
 }

.msg_004_close_href {
 cursor: pointer;
 text-decoration: none;
 color: #7F7F7F !important;
 float: right;
 font: 26px Arial,sans-serif;
 margin: 6px 14px;
 }

.msg_004_header{
 width: 100%;
 }

.msg_004_body{
 color: #222222;
 font: 13px Arial,sans-serif;
 margin: 15px 0 0;
 }

.msg_004_title{
 font: bold 17px Arial,sans-serif;
 padding: 0;
 }

.msg_004_image{
 width: 32px;
 height: 32px;
 }
/**********************************************************************/
.error_msg_004{
 border: 1px solid #FFC1C1;
 background-color: #FFE8E8;
 }
.success_msg_004{
 border: 1px solid #ADDE5C;
 background: #DFF2BF;
 }
.info_msg_004{
 border: 1px solid #46B6EC;
 background:#BDE5F8;
 }
.warning_msg_004{
 border: 1px solid #FDDD5B;
 background:#FEEFB3;
 }
/**********************************************************************/
.error_msg_004  .msg_004_title{color: #B10009;}
.success_msg_004 .msg_004_title{color: #008000;}
.info_msg_004  .msg_004_title{color: #00529B;}
.warning_msg_004 .msg_004_title{color: #9F6000;}
/**********************************************************************/
.error_msg_004  #image{ background: url("icon/error_icon_32.png") no-repeat;}
.success_msg_004 #image{ background: url("icon/success_icon_32.png") no-repeat;}
.info_msg_004  #image{ background: url("icon/info_icon_32.png") no-repeat;}
.warning_msg_004 #image{ background: url("icon/warning_icon_32.png") no-repeat;}

jQuery code:

I make this message box is movable so you can drag it to any position by using draggable() method in jQuery, that require us to load jQuery scripts from our server or any other hosting server.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js"></script>


<script>

$(document).ready(

function(){

$(".message_box_004").draggable();

}}

);

</script> 

HTML code:

put this html code in the part you want to show the message, just set class to any one the following types
error_msg_004
success_msg_004
info_msg_004
warning_msg_004
I added X close button at the corner of the box and add a click action event on it to hide the message as close it, just match the message box id, so when I need several message boxes in the same page I will change the id for each one.

 

  ×
 
 

  
   
    

   
  Error message title.
  
 
 
message body message body message body message body message body message body message body message body message body message body message body message body.
 

PHP function code:

I make a php function to present the message in my pages, three parameters are required : message type, title and message text.
and other three optional parameters which determine top, left and width. message type is flexible you can use a string that is insensitive case or you can use a number.
1 or "error"
2 or "success"
3 or "info"
4 or "warning"

/***********************************************************************
http://function-code.blogspot.com/2012/12/css-message-boxes-for-different-types.html
My code is free to use, but not free to republish
************************************************************************/

function message_box_004($msg_type, $msg_title, $msg_body, $msg_top=100, $msg_left=350, $msg_width=410){
 $msg_type = strtoupper($msg_type);
 switch ($msg_type)
 {
 case "ERROR": case "1":
   $class_name = "error_msg_004";
   break;
 case "SUCCESS": case "2":
   $class_name = "success_msg_004";
   break;
 case "INFO": case "3":
   $class_name = "info_msg_004";
   break;
 case "WARNING": case "4":
  $class_name = "warning_msg_004";
   break;
}
$t1 = rand();
echo'

 

  ×
 
 

  
   
    

   '.$msg_title.'
  
 
 
'.$msg_body.'

';
}

ex:

message_box_004("error","Access denied","you don't have permission.");
message_box_004(1,"Access denied","you don't have permission.",50,600);

If this post was good and helpful for you, Please give it Like.

.