JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script src="http://twitter.github.com/bootstrap/assets/js/jquery.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-modal.js"></script>
<!-- Modal -->
<div id="myModal" class="modal hide fade hidden" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="dynamicHeader">
<!-- Our header will go here -->
</h3>
</div>
<div class="modal-body" id="dynamicBody">
<!-- Our body will go here -->
</div>
<div class="modal-footer">
<a href="#" class="btn">Close</a>
<a href="#" class="btn btn-primary">Save changes</a>
</div>
</div>
<div id="form1" class="hidden">
<div class="formHeader">
Form One
</div>
<div class="formBody">
<p>Html and stuff</p>
</div>
</div>
<div id="form2" class="hidden">
<div class="formHeader">
Form Two
</div>
<div class="formBody">
<p>Different stuff</p>
</div>
</div>
<a id="launchButton" class="btn btn-primary btn-large">Launch Form One</a>
<a id="launchButton2" class="btn btn-primary btn-large">Launch Form Two</a>
CSS
.hidden {
display: none;
}
JavaScript
var ModalManager = (function() {
// cache some DOM references
var $dynamicHeader = $('#dynamicHeader');
var $dynamicBody = $('#dynamicBody');
var $myModal = $('#myModal');
var launch = function(header, body) {
$dynamicHeader.html(header);
$dynamicBody.html(body);
$myModal.modal(/* options here */);
};
return {
launch: launch
/* expose more API methods here! */
};
}());
$(function() {
var launchModal = function(formId) {
var $formElement = $(document.getElementById(formId));
var headerHtml = $formElement.find('.formHeader').html();
var bodyHtml = $formElement.find('.formBody').html();
ModalManager.launch(headerHtml, bodyHtml );
};
$('#launchButton').on('click', function() {
launchModal('form1');
});
$('#launchButton2').on('click', function() {
launchModal('form2');
});
});