Skip to content

Instantly share code, notes, and snippets.

@Mauryashubham

Mauryashubham/index.html

Created July 11, 2019 14:55
Show Gist options
  • Save Mauryashubham/0f927fd23097de55873c863601bd3e4b to your computer and use it in GitHub Desktop.
Save Mauryashubham/0f927fd23097de55873c863601bd3e4b to your computer and use it in GitHub Desktop.
Download ZIP
Bootstrap Auto Popup on page load
Raw
index.html
Auto Popup on page load
How to make an Auto Popup on page load and close after some time using bootstrap
/**
@author : Shubham Maurya,
Email id : [email protected]
**/
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>
Comment Below, If any problem occurs.
STAY CONNECTED FOR MORE
Source : https://shubhammaurya.com
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment