הנה התוצאה:
loaderCSS.jpg
וזה קוד הHTML (מבוסס על שימוש ב Bootstrap ) של המודל אותו יש להוסיף בדף (רצוי למטה 😉 😞
<div class="modal fade in" id="preparing-file-modal" role="dialog" >
<div class="modal-dialog modal-lg">
<div class="modal-content" >
<div class="modal-body alert alert-info text-center">
<h3><b>הפקת הקבלה מתבצעת, אנא המתן...</b></h3>
<div style="width:300px;height:200px">
<div id="cssload-wrapper">
<div class="cssload-loader">
<div class="cssload-line"></div>
<div class="cssload-line"></div>
<div class="cssload-line"></div>
<div class="cssload-line"></div>
<div class="cssload-line"></div>
<div class="cssload-line"></div>
<div class="cssload-subline"></div>
<div class="cssload-subline"></div>
<div class="cssload-subline"></div>
<div class="cssload-subline"></div>
<div class="cssload-subline"></div>
<div class="cssload-loader-circle-1"><div class="cssload-loader-circle-2"></div></div>
<div class="cssload-needle"></div>
<div class="cssload-loading">טוען...</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal fade in" id="error-modal" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content" >
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">שגיאה!!</h4>
</div>
<div class="modal-body">
<div class="alert">
<div class="alert-danger text-center">
<h4><b>ישנה תקלה ביצירת הקבלה, אנא נסה שנית. </b></h4>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-warning" data-dismiss="modal">אישור</button>
</div>
</div>
</div>
</div>
קוד הJS שמופעל בלחיצה על הכפתור של יצירת הקבלה (לא הובא בHTML..):
$("a[data-create-reciept]").on("click", function (e) {
$('#preparing-file-modal').modal('show');
$.fileDownload($(this).attr('href'), {
successCallback: function (url) {
$('#preparing-file-modal').modal('hide');
},
failCallback: function (responseHtml, url) {
$('#preparing-file-modal').modal('hide');
$('#error-modal').modal('show');
}
});
return false;
});
וכמובן צריך להוסיף את הגדרות הCSS שיוצרות לנו את מד המהירות הנחמד, שהם לקוחות מהאתר הזה:
ומפאת האריכות שלהם - אני לא מצרף אותם, אלא אפשר לקחת אותם מהקישור הנ"ל.. (ניסיתי לצרף כקובץ נפרד, אבל מה לעשות שהפורום לא מרשה להעלות קבצי CSS ).
אם זה יעזור למישהו - והיה זה שכרי...
פורסם במקור בפורום CODE613 ב18/03/2016 00:02 (+02:00)
