Bootstrap Modal Base
HTML
<link rel="stylesheet" href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css">
<link rel="stylesheet" href="http://getbootstrap.com/2.3.2/assets/css/bootstrap-responsive.css">
<link rel="stylesheet" href="http://jschr.github.io/bootstrap-modal/css/bootstrap-modal.css">
<script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap.js"></script>
<script src="http://jschr.github.io/bootstrap-modal/js/bootstrap-modalmanager.js"></script>
<script src="http://jschr.github.io/bootstrap-modal/js/bootstrap-modal.js"></script>
<form action="/" method="post">
<button href="#myModal" data-toggle="modal" class="btn">Login</button>
</div>
JavaScript
var $modal = $('#myModal');
$('.submit').on('click', function (e) {
var $this = $(this);
// wait until modal is back in original DOM position
$modal.one('destroyed', function () {
$this.closest('form').submit();
});
});
// This is just for debugging
$('form').on('submit', function (e) {
alert(JSON.stringify($(this).serializeArray()));
e.preventDefault();
});