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 Comment

Leave a Reply

Your e-mail address will not be published. Required fields are marked *

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

Do you have any Query / Suggestion