In this article I will explain with an example, how to open Bootstrap Modal Popup on Page Load.
The Bootstrap Modal Popup will be opened inside the JavaScript window.onload event handler which executes after the Page is loaded in Browser.
HTML Markup
The following HTML Markup consists of an HTML DIV assigned with a CSS class modal and role dialog.
This particular DIV will be opened as Bootstrap Modal Popup without Button click.
<div id="simpleModal" class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Customer Details Form</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
I love ASPSnippets!
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Opening (showing) Bootstrap Modal Popup on Page Load
First, the Script and CSS files required for Bootstrap are inherited.
Then inside the JavaScript window.onload event handler, the OpenBootstrapPopup JavaScript function is called which first references the HTML DIV using jQuery and then calls the Bootstrap modal function which displays the Bootstrap Modal Popup.
Note: The Bootstrap modal function when the parameter is passed as show it displays the Modal Popup and when the parameter is passed as hide, it hides the Modal Popup.
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script type="text/javascript">
window.onload = function () {
OpenBootstrapPopup();
};
function OpenBootstrapPopup() {
$("#simpleModal").modal('show');
}
</script>
Screenshot
![Open (show) Bootstrap Modal Popup on Page Load]()
Browser Compatibility
The above code has been tested in the following browsers.
![Internet Explorer]()
![FireFox]()
![Chrome]()
![Safari]()
![Opera]()
* All browser logos displayed above are property of their respective owners.
Demo
Downloads
