Dynamic (AJAX) loaded Bootstrap Modal (Bootstrap 2.0)

custom.js

$(document).ready(function() {
	
// Support for AJAX loaded modal window.
// Focuses on first input textbox after it loads the window.
$('[data-toggle="modal"]').click(function(e) {
	e.preventDefault();
	var href = $(this).attr('href');
	if (href.indexOf('#') == 0) {
		$(href).modal('open');
	} else {
		$.get(href, function(data) {
			$('<div class="modal" >' + data + '</div>').modal();
		}).success(function() { $('input:text:visible:first').focus(); });
	}
});
	
});

index.htm

<a href="/url/to/load/modal_window.htm" data-toggle="modal">link</a>

modal_window.htm

<div class="modal-header">
	<a class="close" data-dismiss="modal">×</a>
	<h3>Modal header 2</h3>
</div>
<div class="modal-body">
	<p>One body...</p>
</div>
<div class="modal-footer">
	<a class="btn btn-primary">Save Changes</a>
	<a class="btn" data-dismiss="modal">Close</a>
</div>

secondWay.html

<!--Citing from: http://blog.assimov.net/blog/2012/03/09/ajax-content-in-twitter-bootstrap-modal/ -->
<a class="btn" id="demo" href="/url/to/load/ajax.php" data-toggle="modal" data-target="#myModal">Launch Modal</a>
<div class="modal fade" id="myModal">
	<div class='modal-header'>
		<button type='button' class='close' data-dismiss='modal'>&times;</button>
		<h3>A Header</h3>
	</div>
	<div class='modal-body'>
		<p>Loading...</p>
	</div>
	<div class='modal-footer'>
		<a href='#' class='btn' data-dismiss='modal'>Close</a>
	</div>
</div>
<script>
($("a[data-toggle=modal]")).click(function() {
  var target, url;
  target = $(this).attr('data-target'); // we could do: target = $("#myModal div.modal-body");
  url = $(this).attr('href');
  return $(target).load(url);
});
</script>

@revivemarketing thanks for sharing!