In this article I will explain how to open (show) Bootstrap Modal Popup inside JavaScript function.
The Bootstrap Modal Popup will be opened inside a JavaScript function.
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 using JavaScript
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 using JavaScript]()
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
