JSFiddle - React, Tailwind, and code Playground
HTML
<script type="text/javascript" src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.1.0/js/bootstrap.min.js"></script>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.1.0/css/bootstrap-combined.min.css" rel="stylesheet">
<div id="progressModal" class="modal" role="dialog" tabindex="-1" style="display:none">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a></div>
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-body">
My Chart Would Be Here
</div>
</div>
</div>
</div>
<input type="button" />
JavaScript
$(document).ready(function () {
$("#progressModal").modal({
keyboard: true,
show: false,
backdrop: 'static'
});
function openProgressDialog() {
$('#progressModal').modal("show");
return true;
}
function closeProgressDialog() {
$('#progressModal').modal("close")
return true;
}
$("input").click(function () {
openProgressDialog();
});
});