量表添加提示弹窗

src/html/scale.html

@@ -117,6 +117,43 @@
       border: 1px solid red;
       box-sizing: border-box;
     }
+    .modal {
+      display: none;
+      position: fixed;
+      width: 350px;
+      height: 80px;
+      left: 50%;
+      top: 50%;
+      text-align: center;
+      line-height: 80px;
+      margin: -40px 0 0 -175px;
+      border-radius: 10px;
+      overflow: hidden;
+    }
+    .modalBg, .modalInfo {
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 100%;
+      height: 100%;
+     
+    }
+    .modalBg {
+      background: #000;
+      opacity: 0.8;
+      filter:alpha(opacity=80);
+      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=80);";
+      z-index: 1
+    }
+    .modalInfo {
+      color: #fff;
+      z-index: 2
+    }
+    .closeModal {
+      position: absolute;
+      right: 15px;
+      top: 33px;
+    }
   </style>
   <script>
     if (!Function.prototype.bind) {
@@ -143,7 +180,14 @@
   <div class="container">
     <h1></h1>
     <div class="content"></div>
-
+    <div class="modal">
+      <div class="modalBg">
+      </div>
+      <p class="modalInfo">
+        请先将量表内容填写完整
+        <img class="closeModal" src="./../images/close.png" alt="">
+      </p>
+    </div>
   </div>
 
   <!-- <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>

src/js/scale.js

@@ -65,6 +65,18 @@ $(function(){
                             
                         }
                     }
+                    if(!allSelect) {
+                        $('.modal').css('display', 'block');
+                        let timer = setTimeout(() => {
+                            $('.modal').css('display', 'none');
+                        }, 2000);
+                        $('.closeModal').click(function() {
+                            $('.modal').css('display', 'none');
+                            if(timer) {
+                                clearTimeout(timer)
+                            }
+                        })  
+                    }
                     if(allSelect) {
                         getCalcuResult(scaleList)
                     }
@@ -76,6 +88,7 @@ $(function(){
         })
     
     }
+    
 
   })
 
@@ -107,7 +120,7 @@ function renderCalcu(scaleList) {
             
         }
         if(scaleList.group[j].groupCalculate.isShow == 1) {
-            str += '<div class="calcu">记分：'+ scaleList.group[j].groupCalculate.result.value +' '+ scaleList.group[j].groupCalculate.result.text +'</div>'
+            str += '<div class="calcu">计分：'+ scaleList.group[j].groupCalculate.result.value +' '+ scaleList.group[j].groupCalculate.result.text +'</div>'
 
         }
         str +=  '</div>'
@@ -117,7 +130,7 @@ function renderCalcu(scaleList) {
     if(scaleList.calculate && scaleList.calculate.result) {
         calcuStr += scaleList.calculate.result.value + ' ' + scaleList.calculate.result.text
     }
-    calcuStr += '</span><span class="calcuBtn">计算<span></div>'
+    calcuStr += '</span><span class="calcuBtn">得分<span></div>'
     var allStr = '<div class="calcuWrapper">' + str + calcuStr + '</div>'
     $('.content').append(allStr)
 }
@@ -145,7 +158,7 @@ function renderCalcu(scaleList) {
                     let calcuItem = data.group.filter(function(item) {
                         return item.groupName == calcuItemName
                     })[0]
-                    $('.calcu').eq(i).html('记分：' + calcuItem.groupCalculate.result.value +  ' ' +  calcuItem.groupCalculate.result.text)
+                    $('.calcu').eq(i).html('计分：' + calcuItem.groupCalculate.result.value +  ' ' +  calcuItem.groupCalculate.result.text)
                 }
             }
             $('.allCalcu').eq(0).html('总分：' + data.calculate.result.value +  ' ' + data.calculate.result.text)