Bootstrap modal + ladda btn loader
<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" onclick="$('.modal-body > form').submit();">Save Changes</a>
<a class="btn" data-dismiss="modal">Close</a>
</div>
$(function() {
$('[data-toggle="modal"]').on('click', function(e) {
e.preventDefault();
var url = $(this).attr('href');
if (!url.indexOf('#') == 0) {
var l = Ladda.create(this);
var modal, modalDialog, modalContent;
modal = $('<div class="modal fade" />');
modalDialog = $('<div class="modal-dialog" />');
modalContent = $('<div class="modal-content" />');
modal.modal('hide')
.append(modalDialog)
.on('hidden.bs.modal', function(){ $(this).remove(); })
.appendTo('body');
modalDialog.append(modalContent);
l.start();
$.get(url, function(data) {
modalContent.html(data);
modal.modal('show');
l.stop();
});
}
});
});
<a href="/url/to/load/modal_window.htm"
data-toggle="modal"
data-target="#"
data-style="zoom-out"
class='ladda-button btn'>
<span class='ladda-label'>link</span>
</a>