Loader après OnClick

Bonjour,

Je développement actuellement une application Web, qui permet de gérer les jours de vacances d'une entreprise en ASP.NET MVC 5. Je débute en Javascript, et j'ai quelques soucis pour faire un truc qui semble très simple, mais malgré de longues recherches je ne trouve toujours pas.

C'est assez simple, j'ai un link (qui est enfaite un button avec le CSS), lorsqu'on click dessus, il va aller faire un tas d'opération dans le controller, dont l'envoi d'un mail. Celui est un peu long, celà prend en moyenne 2-3 sec, si par erreur l'utilisateur s'amuse à appuyer 2-3 fois sur le button, celà va envoyer 2-3 mails. Je veux donc palier à ce probème, en affichant une sorte fond noir un peu transparant avec un message, pour l'utilisateur.

Je vous présente ce que j'ai tester jusqu'ici mais qui ne fonctionne pas comme je le voudrais

Le link en question :

Code:

<a href="@(Url.Action("Accept", "Manager", new { HolidayId = item.HolidayId }))" class="uifw-button xsmall black" OnClick="ShowSendingProgress()"><i class="uifw-icon-standard uifw-icon-standard-check-circle xsmall "></i>Accept</a>

La div appelée par le code JS :
Code:

1 2 3 <div class="loading" id="modalSending" align="center" style="display:none"> <img src="~/images/ajax-loader.gif" /> </div>
Le code JS :
Code:

1 2 3 4 5 6 7 8 9 10 11 function ShowSendingProgress() { var modal = $('<div />'); modal.addClass("modal"); modal.attr("id", "modalSending"); $('body').append(modal); var loading = $("#modalSending.loading"); loading.show(); var top = '215px'; var left = '560px'; loading.css({ top: top, left: left, color: '#ffffff' }); }
Merci d'avance pour votre aide,

Cordialement,