jQuery Show Popup Message Few Seconds then hide

Today, We want to share with you jQuery Show Popup Message Few Seconds then hide.In this post we will show you jquery show div for 5 seconds then hide, hear for jQuery close alert window automatically after 5 seconds we will give you demo and example for implement.In this post, we will learn about Show alert message for few seconds and fade away using jQuery with an example.

jQuery Show Popup Message Few Seconds then hide

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

As I will cover this Post with live Working example to develop Show Popup Message Few Seconds Using jQuery, so the some major files and Directory structures for this example is following below.

Read Also:  How to Integrate Google No CAPTCHA reCAPTCHA using VueJS

Step 1 : Add HTML Interface

index.html

<b>Make a div disappear or appear after few seconds with jQuery</b>
<input type="button" id="btnReset" Value=" Run jquery(disappear or appear) Again!!" />
<br/><br/>
<div class="subject">  Hello, I will disappear in 2 seconds! </div>

Setp 2: Include jQuery

Show Popup Message Few Seconds Using jQuery

simple jQuery show for X seconds then hide div

$(document).ready(function() {
    setTimeout(function() {
        $(".subject").fadeOut(1500);
    }, 2000);

    $('#btnReset').click(function() {
        $(".subject").show();
        setTimeout(function() {
            $(".subject").fadeOut(1500);
        }, 2000);
    });
});

Step 3 : Include Custom CSS

body
{
    padding: 18px;
    font-size:18pt;
    font-family: Calibri;
}

.subject
{
    color: purple;
    border: 2px solid green;
    width:400px;
    padding: 20px;
}

Example 2 : Show Popup Message Few Seconds Using jQuery

index.html

<!DOCTYPE html>
<html>
   <head>
      <title>Show Popup Message Few Seconds Using jQuery</title>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <style>
         .popup{
         position:relative;
         z-index:999;
         width:300px;
         height:30px;
         font-family:Verdana, Arial, Helvetica, sans-serif;
         text-align:center;
         font-size:13px;;
         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;
         }
      </style>
   </head>
   <body>
      <h1>Show Popup Message Few Seconds Using jQuery</h1>
      <form class="form-login" method="post" id="loginform" action="index.php">
         <div class="form-group">
            <input class="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="form-control" placeholder="Member Password" name="password" id="password" />
            <div id="memberpasscheck" class="popup_error"></div>
         </div>
         <div class="form-group">
            <input class="btn btn-default" type="button" name="btnSubmit" value="Submit" onclick="checkMember();"/>
         </div>
      </form>
      <script>
         function checkMember(membercheck){
         var membername = $('#membername').val();
         var password = $('#password').val();
         if (!membername) {
         $('#membercheck').show();
         $('#membercheck').css('color', '#CC0000');
         $('#membercheck').html('Please enter member name.');
         $('#membername').focus();
         $('#membername').addClass('error');
         setTimeout("$('#membercheck').fadeOut(); ", 3000);
         } else if(!password) {
         $('#membername').removeClass('error');
         $('#memberpasscheck').show();
         $('#memberpasscheck').css('color', '#CC0000');
         $('#memberpasscheck').html('Please enter password.');
         $('#password').focus();
         $('#password').addClass('error');
         setTimeout("$('#memberpasscheck').fadeOut(); ", 3000);
         } else {
         $('form#loginform').submit();
         }
         }
      </script>
   </body>
</html>

Angular 6 CRUD Operations Application Tutorials

Read :

Read Also:  How to Get selected/checked Radio Button value using jQuery?

Summary

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

I hope you get an idea about jQuery Show Popup Message Few Seconds then hide.
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 and Auto close
  2. Read Also:  Polymorphic relationships in Laravel 5.7 Example
  3. Read Also:  Add Edit Delete Table Row Example using JQuery
  4. Read Also:  jQuery Hide DIV After 5 Seconds Dynamic
  5. Read Also:  Laravel Get Absolute Path Document Root Base URL
  6. Read Also:  Laravel Redirecting With Flashed Session Data
  7. Read Also:  Back to Top Button using jQuery and CSS - Scroll to Top Example
  8. Read Also:  How to Convert a String to a Number in PHP?
  9. Read Also:  VueJS Arrays - tips, tricks and examples
  10. Read Also:  How to play audio using javascript?
CLOSEX