jQuery Show Popup Message Few Seconds and Auto close

Today, We want to share with you jQuery Show Popup Message Few Seconds and Auto close.
In this post we will show you Automatically Close Popup After 10 Second, hear for Show and Auto close bootstrap alert messages after few seconds we will give you demo and example for implement.
In this post, we will learn about Show Popup Message Few Seconds Using jQuery with an example.

jQuery Show Popup Message Few Seconds and Auto close

There are the Following The simple About jQuery Show Popup Message Few Seconds and Auto close Full Information With Example and source code.

Read Also:  Angular 6 and ASP.NET Core 2.0 Web API Example

How to close automatically Popup Message after ‘x’ seconds?

Steps 1: FORM HTML

lets start, I have simple created form HTML step by step using Bootstarp

<h1>Show Popup Message Few Seconds Using jQuery</h1>
<form class="form-login" method="post" id="memberSignInFrm" action="index.php">
<div class="form-group pakainfo">
<input class="pakainfo form-control" placeholder="Membername" type="text" name="membername" id="membername" />
<div id="memberCheck" class="popup_error"></div>
</div>
<div class="form-group">
<input type="password" class="pakainfo form-control" placeholder="Password" name="password" id="password" />
<div id="retyprPassword" class="popup_error"></div>
</div>
<div class="form-group">
<input class="btn btn-success" type="button" name="btnSubmit" value="Submit" onclick="checkMember();"/>
</div>
</form>

Steps 2: Design POPUP

In style CSS To Design POPUP

.pakainfo{
color: #000000;
}
.popup_error{
-webkit-border-radius: 6px; -moz-border-radius: 6px;
border:2px solid #dcd9d3;
color: #FFFFFF;
display:none;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;;
font-weight: bold;
height:40px;
margin:2px 0px 0px 0px;
padding-top:5px;
position:relative;
text-align:center;
width:250px;
z-index:999;
}

Steps 3: Show and Hide Popup

in JavaScript To Show and Hide Popup

function checkMember(memberCheck){
var membername = $('#membername').val();
var password = $('#password').val();
if (!membername) {
$('#memberCheck').show();
$('#memberCheck').css('color', '#CC0000');
$('#memberCheck').html('Please enter user name.');
$('#membername').focus();
$('#membername').addClass('error');
setTimeout("$('#memberCheck').fadeOut(); ", 3000);
} else if(!password) {
$('#membername').removeClass('error');
$('#retyprPassword').show();
$('#retyprPassword').css('color', '#CC0000');
$('#retyprPassword').html('Please enter password.');
$('#password').focus();
$('#password').addClass('error');
setTimeout("$('#retyprPassword').fadeOut(); ", 3000);
} else {
$('form#memberSignInFrm').submit();
}
}

Angular 6 CRUD Operations Application Tutorials

Read :

Read Also:  custom ajax multiple file uploading Dropzone using PHP

Summary

You can also read about AngularJS, ASP.NET, VueJs, PHP.

I hope you get an idea about How to close automatically dialog after ‘x’ seconds?.
I would like to have feedback on my Pakainfo.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.


Related FAQ

Here are some more FAQ related to this Article:

  1. Read Also:  jQuery Show Popup Message Few Seconds then hide
  2. Read Also:  Php Static Variables & Methods
  3. Read Also:  Angularjs Check duplicated value in array
  4. Read Also:  Angular 6 HTTPClient GET Request Example
  5. Read Also:  Publishing Ionic app to Google Play Store App Release
  6. Read Also:  How to check if file exists or not in Laravel 5?
  7. Read Also:  how to enable shell_exec in cpanel?
  8. Read Also:  Bootstrap 4 Testimonial Slider Example
  9. Read Also:  ng-mousedown Event using Angular Example
  10. Read Also:  How to check if file exists or not in Laravel 5?