Show popup message for few seconds using jQuery

We have seen checking username availability using jQuery in earlier post. Here is a slight modification on showing of error/success message. The message will be shown as popup and disappears after few seconds. Using this way we can show the message in more fancy way.
The Javascript Code:


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>

<script type="text/javascript">
function checkUserName(usercheck)
{
	var uname = document.getElementById('username').value;
	$.post("checkuser.php", {user_name: uname} , function(data)
		{			
			   if (data != '' || data != undefined || data != null) 
			   {				   
				  $('#usercheck').show();
				  $('#usercheck').html(data);
				  setTimeout("$('#usercheck').hide(); ", 3000); //display message for 3 seconds
			   }
          });
}

function checkUserLogin(user_id)
{
   if (user_id == '' || user_id == undefined || user_id == null) 
   {				   
	  $('#logincheck').show();
	  $('#logincheck').css('color', '#CC0000');
	  $('#logincheck').html('You must be logged in to submit.');
	  setTimeout("$('#logincheck').hide(); ", 3000); //display message for 3 seconds
   }
   else {
   	  document.frmPopMessage.submit();
   }
}
</script>


The CSS Code:

.popup_error{
position:absolute;
z-index:10;
width:250px;
height:30px;
font-family:Verdana, Arial, Helvetica, sans-serif;
text-align:center;
font-size:12px;
font-weight: bold;

background-color: #FFFFCC;
color: #FFFFFF;
border:2px solid #FFCC66;
padding-top:15px;

filter:alpha(opacity=90);
opacity:0.9;
display:none;
}

The HTML Code:


<form name="frmPopMessage" id="frmPopMessage" method="post" action="">
<div> Example 1: Checking username availability</div>
<div id="usercheck" class="popup_error"></div>
<div style="padding:10px 0px  10px 10px;">
Username : <input type="text" name="username" id="username"  /> 
</div>
<div style="padding:10px 0px  50px 10px;">
<input type="button" name="btnSubmit" value="Submit" onclick="checkUserName();"/>
</div>
<br />
<div> Example 2: Checking user Login</div>
<div id="logincheck" class="popup_error"></div>
<div style="padding:10px 0px  50px 10px;">
<input type="button" name="btnSubmit" value="Click to Submit" onclick="checkUserLogin(<?php echo $_SESSION['user_id'];?>);"/>
</div>
</form>


Demo Download

Be Sociable, Share!
You can leave a response, or trackback from your own site.

One Response to “Show popup message for few seconds using jQuery”

  1. That blog image is very attractive. I like it very much & I read this blog it is very nice. Thanks for the sharing. Keep it up.

Leave a Reply

CommentLuv badge
 

Powered by WordPress