Like Us Like Us Facebook Subscribe Subscribe us YouTube Whatsapp Share us Whatsapp Query Send your queries

Launch Bootstrap Modal on page load

Launch Bootstrap Modal on page load

In this tutorial I am going to show how to create a web page that launch a Bootstrap model automatically whenever its load. Launching Bootstrap Model on page load requires 3 file jquery, Bootstrap CSS and Bootstrap JavaScript file.

Working Example

Just create a file called launch.html with code below and launch this file, remember we should have a working internet connection to load Jquery, bootstrap files from CDN. The below screen shot was taken while working on a school web application when a clerk going to take admission , he has to follow below given instruction .



<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Launch Bootstrap modal on page load</title>
<!-- CDN -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- CDN -->
</head>
<body>
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<h4 class="modal-title">Load Bootstrap modal on page launch</h4>
</div>
<div class="modal-body">
<p>
This is a simple Demo to launch a model on page load.
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function () {
$('.modal').modal('show');
});
</script>
</body>
</html>

4
Leave a Reply

avatar
2 Comment threads
2 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
3 Comment authors
harshit raoSanjay PrasadFirstLorene Recent comment authors

This site uses Akismet to reduce spam. Learn how your comment data is processed.

  Subscribe  
newest oldest most voted
Notify of
FirstLorene
Guest

I see you don’t monetize your page, don’t waste your traffic, you
can earn additional cash every month because you’ve
got hi quality content. If you want to know how to make extra
money, search for: Boorfe’s tips best adsense
alternative

harshit rao
Guest

i think adsense is better than other

Do you have any Query / Suggestion