Show Popup Message Few Seconds Using jQuery

We often need to display popup with message that’s need to disappear after certain amount of seconds. Once I was creating this and it took me some time to find a good tutorial to create it. So here I have created a simple tutorial to create popup with message to disappear after certain amount of time.

Here in this tutorial we will show error message as a pop-up using jQuery. The message will be shown as popup and disappears after few seconds. Using this way we can show the message in more fancy way.

 

So let’s start the coding,

Steps1: FORM HTML
Here in this example we have created form HTML using Bootstarp.
<form class="form-login" method="post" id="loginform" action="index.php">
<div class="form-group">
<input class="form-control" placeholder="Username" type="text" name="username" id="username" />
<div id="usercheck" class="popup_error"></div>
</div>
<div class="form-group">
<input type="password" class="form-control" placeholder="Password" name="password" id="password" />
<div id="passwordcheck" class="popup_error"></div>
</div>
<div class="form-group">
<input class="btn btn-default" type="button" name="btnSubmit" value="Submit" onclick="checkUser();"/>
</div>
</form>


Steps2: CSS To Design POPUP
Here we have designed popup that's displayed with message.
.popup{
position:relative;
z-index:999;
width:200px;
height:30px;
font-family:Verdana, Arial, Helvetica, sans-serif;
text-align:center;
font-size:12px;;
font-weight: bold;
color: #FFFFFF;
border:2px solid #dcd9d3;
padding-top:5px;
display:none;
-webkit-border-radius: 6px; -moz-border-radius: 6px;
margin:2px 0px 0px 0px;
}


Steps3: JavaScript To Show and Hide Popup
Here we have handled functionality to display popup with message and hide after three seconds using jQuery.
function checkUser(usercheck){
var username = $('#username').val();
var password = $('#password').val();
if (!username) {
$('#usercheck').show();
$('#usercheck').css('color', '#CC0000');
$('#usercheck').html('Please enter user name.');
$('#username').focus();
$('#username').addClass('error');
setTimeout("$('#usercheck').fadeOut(); ", 3000);
} else if(!password) {
$('#username').removeClass('error');
$('#passwordcheck').show();
$('#passwordcheck').css('color', '#CC0000');
$('#passwordcheck').html('Please enter password.');
$('#password').focus();
$('#password').addClass('error');
setTimeout("$('#passwordcheck').fadeOut(); ", 3000);
} else {
$('form#loginform').submit();
}
}


You can view the live demo from the Demo link and can download the script from the Download link below.
Demo [sociallocker]Download[/sociallocker]