예산 loading js

src/main/resources/static/js/common.js

@@ -357,3 +357,37 @@ function ajaxErrorAction(e){
     }
   }
 }
+
+function LoadingWithMask() {
+  //화면의 높이와 너비를 구합니다.
+  let maskHeight = $(document).height();
+  let maskWidth  = window.document.body.clientWidth;
+
+  //화면에 출력할 마스크를 설정해줍니다.
+  let mask       = "<div id='mask' style='position:fixed; z-index:99; background-color:#000; display:none; left:0; top:0;'><div id='loadingImg' class='panel-body'><div class='fa-3x'><i class='fas fa-spinner fa-pulse'></i></div></div></div>";
+
+  //화면에 레이어 추가
+  $("body")
+      .append(mask)
+
+  //마스크의 높이와 너비를 화면 것으로 만들어 전체 화면을 채웁니다.
+  $("#mask").css({
+    'width' : maskWidth,
+    'height': maskHeight,
+    'opacity' : '0.7'
+  });
+  $("#loadingImg").css({
+    'position' : 'absolute',
+    'z-index' : '100',
+    'top' : '50%',      //parseInt(maskHeight)/2-20
+    'left' : '50%',       //parseInt(maskWidth)/2-20,
+  });
+
+  //마스크 표시
+  $("#mask").show();
+}
+
+function WithoutMask() {
+  $("#mask, #loadingImg").hide();
+  $("#mask, #loadingImg").remove();
+}