html Bootstrap modal + ladda btn loader

Posted 2021-05-11

<div class="modal-header">
	<a class="close" data-dismiss="modal">&times;</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>