In this article I will explain with an example, how to open (show) Bootstrap 3 Modal Popup Window using jQuery.
This article makes use of Bootstrap version 3.
HTML Markup
The following HTML Markup consists of an HTML INPUT Button.
<input type="button" id="btnShowPopup" value="Show Popup" class="btn btn-info btn-lg" />
Applying Bootstrap Modal Popup Plugin
Inside the HTML Markup, the following Bootstrap 3 CSS file is inherited.
1. bootstrap.min.css
1. jquery.min.js
2. bootstrap.min.js
The HTML Markup also consists of an HTML DIV. The HTML DIV has been applied with Bootstrap 3 Modal Popup plugin.
<!-- Bootstrap -->
<link rel="stylesheet" href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css' media="screen" />
<script type="text/javascript" src='https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.3.min.js'></script>
<script type="text/javascript" src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js'></script>
<!-- Bootstrap -->
<!-- Modal Popup -->
<div id="MyPopup" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title"></h4>
<button type="button" class="close" data-dismiss="modal">
×</button>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">
Close</button>
</div>
</div>
</div>
</div>
<!-- Modal Popup -->
Opening (Showing) Bootstrap Modal Popup Window using jQuery
Inside the jQuery document ready event handler, the Button has been assigned a jQuery Click event handler.
Inside this Click event handler, first the title and body values are set in their respective HTML DIVs and the Bootstrap Modal Popup Window will be opened (shown) using show function.
<script type="text/javascript">
$(function () {
$("#btnShowPopup").on('click', function () {
var title = "Greetings";
var body = "Welcome to ASPSnippets.com";
$("#MyPopup .modal-title").html(title);
$("#MyPopup .modal-body").html(body);
$("#MyPopup").modal("show");
});
});
</script>
Screenshot
![Open (Show) Bootstrap Modal Popup Window using jQuery]()
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
