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 to make things easy for you, here in this tutrial, 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.

Also, read:

• Ajax Login Script with PHP and jQuery
• Ajax Registration Script with PHP, MySQL and jQuery

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 may also like:

• Star Rating System with Ajax, PHP and MySQL
• Create Event Calendar with jQuery, PHP and MySQL
• Build Your Own CAPTCHA Script with PHP
• Convert Unix Timestamp To Readable Date Time in PHP
• Inventory Management System with Ajax, PHP & MySQL
• Create Live Editable Table with jQuery, PHP and MySQL
• Live Add Edit Delete datatables Records with Ajax, PHP and MySQL
• Stripe Payment Gateway Integration in PHP
• Export Data to Excel with PHP and MySQL
• Star Rating System with Ajax, PHP and MySQL
• Create Dynamic Bootstrap Tabs with PHP & MySQL
• How To Create Simple REST API in PHP

You can view the live demo from the Demo link and can download the script from the Download link below.
Demo Download