Dynamic (AJAX) Bootstrap Modal (Bootstrap 3)

caller.js

$("[data-toggle='modal']").click(function(e) {
    /* Prevent Default*/
    e.preventDefault();
    
    /* Parameters */
    var url = $(this).attr('href');
    var container = "#" + $(this).attr('data-container');
    
    /* XHR */
    $.get(url).done(function(data) {
        $(container).html(data).modal();
    }).success(function() { $('input:text:visible:first').focus() });

});

index.html

<!-- JS -->
<script src="caller.js"></script>

<!-- Link -->
<a href="/url/to/modal.html" data-toggle="modal" data-container='modal-container'>Abrir Modal</a>

<!-- Buenos Modales -->
<div id="modal-container"></div>

modal.html

<div class="modal-dialog">
	<div class="modal-content">
		<div class="modal-header">
			<a class="close" data-dismiss="modal">&times;</a>
			<h3>Title</h3>
		</div>
		<div class="modal-body">
			<p>Content</p>
		</div>
		<div class="modal-footer">
			<a class="btn btn-primary" onclick="$('.modal-body > form').submit();">Save Changes</a>
			<a class="btn" data-dismiss="modal">Close</a>
		</div>
	</div>
</div>