Message d'attente

core/module/config/view/backup/backup.css

@@ -23,27 +23,35 @@
    for themselves. Background we set to 80% white with
    our animation centered, and no-repeating */
 .modal {
-display:    none;
-    position:   fixed;
-    z-index:    1000;
-    top:        0;
-    left:       0;
-    height:     100%;
-    width:      100%;
-    background: rgba( 0, 0, 0, .9 )
+   display:    none;
+   position:   fixed;
+   z-index:    1000;
+   top:        0;
+   left:       0;
+   height:     100%;
+   width:      100%;
+   background: rgba( 0, 0, 0, .9 )
                 url('core/vendor/zwiico/img/ajax-loader.png')
-                50% 50%
+                50% 45%
                 no-repeat;
  }
+
+.alertMessage {
+   color: lightgrey;
+   display: none;
+   display: flex;
+   align-items: center;
+   justify-content: center;
+}
  
  /* When the body has the loading class, we turn
     the scrollbar off with overflow:hidden */
- body.loading .modal {
+ body.loading .modal .alertMessage {
      overflow: hidden;
  }
  
  /* Anytime the body has the loading class, our
     modal element will be visible */
- body.loading .modal {
+ body.loading .modal .alertMessage {
      display: block;
  }

core/module/config/view/backup/backup.js.php

@@ -15,6 +15,7 @@ $( document).ready(function() {
         $("#configBackupSubmit").addClass("disabled").prop("disabled", true);
         e.preventDefault();
         $("body").addClass("loading");
+        $(".modal").addClass("alertMessage");
         var url = "<?php echo helper::baseUrl() . $this->getUrl(0); ?>/backup";
         $.ajax({
             type: "POST",
@@ -30,6 +31,7 @@ $( document).ready(function() {
             },
             complete: function(){
                 $("#configBackupSubmit").removeClass("disabled").prop("disabled", false);
+                $(".modal").removeClass("alertMessage");
             }
         });
     });

core/module/config/view/backup/backup.php

@@ -13,7 +13,7 @@
 			'value' => 'Sauvegarder'
 		]); ?>
 	</div>
-	<div class="modal"><!-- Emplacement pour l'animation --></div>
+	<div class="modal">Merci de patienter, je travaille pour vous.<!-- Emplacement pour l'animation --></div>
 </div>
 <div class="row">
 	<div class="col8 offset2">