on page load show modal
JavaScript Technical

Launch Bootstrap Modal on page load

Ankit

Welcome back to shortlearner.com, today we will see how to Launch Bootstrap Modal on page load using JavaScript. so in the very first step we will create a index.html file than we will write our JavaScript code which are helps to show our Bootstrap modal on loading of index.html file.

on page load show modal

In the index.html file we will call the bootstrap.min.js and bootstrap.min.css to load bootstrap files in our web page.

index.html

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>

<!-- A Bootstrap Modal -->
<div id="myModal" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title">Subscribe our Newsletter</h4>
            </div>
            <div class="modal-body">
                <p>Subscribe to our mailing list to get the latest updates straight in your inbox.</p>
                <form>
                    <div class="form-group">
                        <input type="text" class="form-control" placeholder="Name">
                    </div>
                    <div class="form-group">
                        <input type="email" class="form-control" placeholder="Email Address">
                    </div>
                    <button type="submit" class="btn btn-primary">Subscribe</button>
                </form>
            </div>
        </div>
    </div>
</div>
</body>
</html>

Add the below bootstrap maxcdn files in the head section of index.html

Also Read :
PHP Login Script With Remember me.
Change password using javascript, php and mysqli.
Password and Confirm Password Validation Using JavaScript
Check Email is Already Registered in Database using Ajax and JavaScript.
How to hide extension of html and php file.? 

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>

now we write down our JavaScript code to launch bootstrap modal on the loading of index.html web page. so put the below JavaScript code on the body section of the index file.

<script type="text/javascript">
    $(document).ready(function(){
        $("#myModal").modal('show');
    });
</script>

on the above JavaScript code we called the modal id and change its behavior from fade to show.

just go to the browser and run your index.html file, the bootstrap modal will automatically launch on page load.

Also Read

Check Email is already registered in database with the help PHP, AJAX And JQuery