The following code shows how to do calculation on dialog.
<!DOCTYPE html>
<html>
<head>
<script type='text/javascript'
src='http://code.jquery.com/jquery-1.9.1.js'></script>
<script type='text/javascript'
src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css"
href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css">
<script type='text/javascript'>
function enteredRange(x, y) {<!-- ww w .jav a2 s. c o m-->
var low = parseFloat(x);
var high = parseFloat(y);
var middle1 = low + high;
middle.value = middle1;
document.getElementById('middle').value = middle1;
}
$(document).ready(function () {
$('#myModal').bind('show', function () {
//do stuf on show
});
$('#btn-modal').click(function() {
$('#myModal').modal('show');
});
});
function closeDialog() {
$('#myModal').modal('hide');
};
function okClicked() {
closeDialog();
};
</script>
</head>
<body>
<div id="myModal" class="modal hide fade" 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="myModalLabel">Get Middle.</h3>
</div>
<div class="modal-body">
<div class="form-inline">
<div class="input-prepend">
<span class="add-on">$</span> <input class="span2" id="lowSide"
type="text" />
</div>
to
<div class="input-prepend">
<span class="add-on">$</span> <input class="span2" id="highSide"
type="text" />
</div>
<button class="btn"
onClick="enteredRange(lowSide.value,highSide.value)">Enter</button>
</div>
<br />
<div class="form-inline">
<label>middle:</label> <input id="middle" type="text" />
</div>
</div>
</div>
<br />
<button id="btn-modal" class="btn">OPEN MODAL</button>
</body>
</html>