jump

resources/views/jump/bindHkFreeCurrency.blade.php

@@ -142,6 +142,52 @@ a{text-decoration: none}
     font-size: 0.15rem;
   font-weight: bold;
 }
+.alert{
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  z-index: 100;
+  left: 0;
+  top: 0;
+  overflow: hidden;
+  background: rgba(0,0,0,.4);
+  }
+.alert .content{
+  width: 80%;
+  height: 2rem;
+  position: absolute;
+  font-size: .11rem;
+  left: 50%;
+  top: 50%;
+  margin-left: -40%;
+  margin-top: -40%;
+  text-align: center;
+  background: #fff;
+}
+.alert .content .close{
+  float: right;
+  width: .3rem;
+  height: .3rem;
+  line-height: .3rem;
+  border-radius: 50%;
+  border: 0px solid #ccccd9;
+  font-size: .2rem;
+}
+
+.alert .content p:first-of-type{
+  margin-top: .5rem;
+  font-size: .33rem;
+}
+.alert .content p:nth-of-type(2){
+  margin-top: .11rem;
+  font-size: .11rem;
+}
+.show{
+  display: block;
+}
+.hide{
+  display: none;
+}
 /*# sourceMappingURL=main.css.map */
 	</style>
   </head>
@@ -173,6 +219,13 @@ a{text-decoration: none}
         </div>
       </div>
     </main>
+    <div class="hide alert">
+      <div class="content">
+          <a class="close" title="关闭">&times;</a>
+          <p>领取成功</p>
+          <p>200书币已到账</p>
+      </div>
+    </div>
   </body>
   <script>
 window.onload=function(){
@@ -189,12 +242,15 @@ window.onload=function(){
     }
     btn.addEventListener("click",function(){
         ajax('POST','/freecurrency',function(){
+          show();
+          setTimeout(function () {
             get_notice.innerText = '领取成功 200书币已经到账';
             btn.innerText = '马上去看书> >';
             btn.setAttribute("href",url);
+          },200);
         })
     });
-
+    close();
     function ajax(method,url,callback){
         var xhr = new XMLHttpRequest();
         xhr.open(method, url, true);
@@ -206,9 +262,18 @@ window.onload=function(){
           callback();
         }
       }
+    }
 
+    function close() {
+      d.querySelector('.close').addEventListener('click',function () {
+        d.querySelector('.alert').setAttribute("class","hide alert");
+      })
     }
 
+  function show() {
+    d.querySelector('.alert').setAttribute("class","show alert");
+  }
+
 }
 
   </script>