/Auto Popup on page load
auto popup on page load

Auto Popup on page load

How to make an Auto Popup on load and close after some time using bootstrap
/**
@author : Shubham Maurya,
Email id : maurya.shubham5@gmail.com
**/

Hi all , Welcome to shubhammaurya.com , Today we are going to discuss ,
How to make an Auto Popup on page load and close after some time

In this,we are going to use Bootstrap as front-end framework.

LETS START

Auto Popup on page load

So, To start first make a file in notepad and save it as index.html and paste the below code.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Auto Popup on page load</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>

  <!-- Modal -->
  <div class="modal fade" id="myModal1" role="dialog" style="z-index: 9999;">
    <div class="modal-dialog">
    
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-body">
        <h4><span>Dummy Heading</span></h4> 
          <small>Enter your dummy paragarh here</small>  
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
      
    </div>
  </div>

<!--popup script-->
<script>
 $( document ).ready(function(){
   setTimeout(function(){$('#myModal1').modal('show');}, 3000);
   
   setTimeout(function() {$('#myModal1').modal('hide');}, 10000);
});
  </script>
        
</body>
</html>

Download the project from Github : Download

Comment Below, If any problem occurs.

STAY CONNECTED FOR MORE

Get More Bootstrap Code Here : Go Here

Hi , My Name is Shubham Maurya and i am currently working as a Project Manager.