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="" 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) 
				  setTimeout("$('#usercheck').hide(); ", 3000); //display message for 3 seconds

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

The CSS Code:

font-family:Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;

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


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 style="padding:10px 0px  50px 10px;">
<input type="button" name="btnSubmit" value="Submit" onclick="checkUserName();"/>
<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'];?>);"/>

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