I have this JS file (Modal.js) which has the functions of show modal and close it after filter.
function showPleaseWait(msg, btnClicked) {
//recebo a mensagem e o botão clicado para saber se o form está valido
if (btnClicked != undefined && btnClicked.localName != "a") {
var $form = $(btnClicked).parents('form');
if ($form.length > 0 && $($form).valid()) {
var msgPadrao = 'Aguarde...';
if (msg == undefined) {
msg = msgPadrao;
}
if (window.outerWidth < 577) {
var pleaseWaitDiv = $('<div class="modal fade" id="pleaseWaitDialog" data-backdrop="static" data-keyboard="false" role="dialog" aria-labelledby="basicModal" aria-hidden="true" tabindex="-1"><div class="modal-dialog"><div class="modal-content" style="background:transparent !important;border: 0px solid #ddd !important;"><div class="modal-body text-center row"><img src="/img/spinningwheel.gif" class="col-md-12 col-sm-12 col-xs-12 col-lg-12" /></div></div></div></div></div></div>');
}
else {
var pleaseWaitDiv = $('<div class="modal fade" id="pleaseWaitDialog" data-backdrop="static" data-keyboard="false" role="dialog" aria-labelledby="basicModal" aria-hidden="true" tabindex="-1"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><h1>' + msg + '</h1></div><div class="modal-body text-center row"><img src="/img/progress_bar.gif" class="col-md-12 col-sm-12 col-xs-12 col-lg-12" /></div></div></div></div></div></div>');
}
pleaseWaitDiv.modal();
}
} else {
var msgPadrao = 'Aguarde...';
if (msg == undefined) {
msg = msgPadrao;
}
if (window.outerWidth < 577) {
var pleaseWaitDiv = $('<div class="modal fade" id="pleaseWaitDialog" data-backdrop="static" data-keyboard="false" role="dialog" aria-labelledby="basicModal" aria-hidden="true" tabindex="-1"><div class="modal-dialog"><div class="modal-content" style="background:transparent !important;border: 0px solid #ddd !important;"><div class="modal-body text-center row"><img src="/img/spinningwheel.gif" class="col-md-12 col-sm-12 col-xs-12 col-lg-12" /></div></div></div></div></div></div>');
}
else {
var pleaseWaitDiv = $('<div class="modal fade" id="pleaseWaitDialog" data-backdrop="static" data-keyboard="false" role="dialog" aria-labelledby="basicModal" aria-hidden="true" tabindex="-1"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><h1>' + msg + '</h1></div><div class="modal-body text-center row"><img src="/img/progress_bar.gif" class="col-md-12 col-xs-12 col-sm-12 col-lg-12"/></div></div></div></div></div></div>');
}
pleaseWaitDiv.modal();
}
}
function hidePleaseWait() {
$('#pleaseWaitDialog').modal('hide');
}
I call them after clicking search.
var data;
/* Busco os dados filtrados pelo range da data */
function Buscar() {
showPleaseWait();
var data = getParameterByName('data');
var dataInicio = $('#datainicio').val();
var dataFinal = $('#datafinal').val();
$('#dashboard').focus();
DrawonLoad(dataInicio, dataFinal, "bottom", 300, "center", 10, data);
buscaAtosPraticados();
DrawonLoad2(dataInicio, dataFinal, "bottom", 300, "center", 10, data);
buscaCertidoes();
DrawonLoad3(dataInicio, dataFinal, "bottom", 300, "center", 10, data);
buscaBalcaoCRT();
}