Jquery Message Box

Jquery Message Box

a css message box that if click the login button a message box display in fade In and by clicking the close button it fade out

   <style type="text/css" media="all">
 * { padding:0; margin:0; }
 .block {
  padding-left:50px;
 }
 .block .message {
  padding: 10px 15px 10px 40px;
  margin: 10px 0;
  font-weight: bold;
  overflow: hidden;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  width:30%;
 }
 .block .message p {
  padding: 0;
  width: 93%;
  float: left;
  text-align:left;
 }
 .block .message.info {
  border: 1px solid #bbdbe0;
  background: #ecf9ff url(images/info0000.gif) 12px 12px no-repeat;
  color: #0888c3;
 }
 .block .message .close {
  display: block;
  float: right;
  width: 16px;
  height: 16px;
  background: url(images/close000.png) 0 0 no-repeat;
  margin-top: 2px;
  cursor: pointer;
  -moz-opacity: 0.7;
  opacity: 0.7;
 }

 .block_content {
  overflow: hidden;
  background: #fff;
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
  padding: 10px 20px 0;
  }
</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
  $(document).ready(function(){ 
    $('.block .message').hide().append('').fadeIn('slow'); //fade message

    $('.block .message .close').click(function() {
    $(this).parent().fadeOut('slow', function() { $(this).remove(); }); //close message
   });
  });
</script>

>?
 if (isset($_POST['Login'])){
  $message = "

   
Just click login, this is an example.
 
  
";
 }

?>


>? echo $message; ?>


 Username:

 


 Password:

 


   



   

Demo

http://creativedesign-mind.com/r-ednalan/demo/Message_box_message.php

Download

http://dl.dropbox.com/u/3293191/JQUERY/jquery_box_message.zip