From 4678765dcd59744b480b74120c03e1e3c5af1935 Mon Sep 17 00:00:00 2001
From: Bohung <bohung@rulingcom.com>
Date: Wed, 16 Jun 2021 15:59:47 +0800
Subject: [PATCH] Add light box. Fix bug.

---
 assets/javascripts/app.js                     |  8 ++-
 .../stylesheets/template/layout/header.scss   |  2 +-
 assets/stylesheets/template/template.scss     | 60 ++++++++++++++++++-
 home/index.html.erb                           |  8 +++
 4 files changed, 75 insertions(+), 3 deletions(-)

diff --git a/assets/javascripts/app.js b/assets/javascripts/app.js
index bbee5c6..13f66c9 100644
--- a/assets/javascripts/app.js
+++ b/assets/javascripts/app.js
@@ -552,7 +552,7 @@
 
 //切換語言停留在同一頁
 if(window.location.href.split(".com")[1]!="/")
-$("#en").attr("href",window.location.href.split(".com")[1].replace("zh_tw","en"))
+$("#en").attr("href",(window.location.pathname + window.location.search).replace("zh_tw","en"))
 
 //檔案室 下載檔案 hover 彈出備註訊息
 $('[data-toggle="tooltip"]').tooltip()
@@ -603,6 +603,12 @@ extendPanelWidget();
       });
     }
     init();
+    if( $('div[data-pp="1000"]').text() !== ''){
+      $('.black-screen').addClass('active');
+    }
+    $('.close-btn').click(function() {
+      $('.black-screen').removeClass('active');
+    })
   });
 
   // 執行 member等高計算，目前改用flexbox故mark掉 by ika 20160105
diff --git a/assets/stylesheets/template/layout/header.scss b/assets/stylesheets/template/layout/header.scss
index 62db79c..b2f9dd8 100644
--- a/assets/stylesheets/template/layout/header.scss
+++ b/assets/stylesheets/template/layout/header.scss
@@ -7,7 +7,7 @@
   margin-bottom: 0;
   border: none;
   border-radius: 0;
-  z-index: 1;
+  z-index: 1 !important;
 
 
   .container {
diff --git a/assets/stylesheets/template/template.scss b/assets/stylesheets/template/template.scss
index 04bf720..0698211 100644
--- a/assets/stylesheets/template/template.scss
+++ b/assets/stylesheets/template/template.scss
@@ -22,7 +22,65 @@
 
 //RWD
 @import "RWD";
-
+.black-screen{
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+  top: -20000px;
+  background: rgba(0,0,0,.7);
+  z-index: 1000;
+  left: 0; 
+  transition:opacity .3s ,top 0s .3s;
+  &.active{
+      opacity: 1;
+      top:0;
+      transition:opacity .3s;
+        .content{
+             transform:translate(-50%,-50%);
+            opacity: 1;
+            top:50%;
+            left: 50%;      
+            // box-shadow: #dcabff 0px 0px 150px;   
+            transition:opacity 1s .8s,top .5s .7s ;      
+        }
+  }
+  .content{
+    background: #fff;
+    color:#666;
+    font-family: '微軟正黑體','sans-serif';
+    position: absolute;
+    opacity: 0;
+    left:-20000px;
+    top:60%;
+    transform:translate(-50%,-50%);
+    transform-origin:center;
+    width: 90%;
+    font-weight: bold;
+    transition:opacity .5s ,top .5s, left 0s .5s;
+    padding: 2px;
+    @media (min-width: 768px){
+      width: 40%;
+      padding: 30px;
+    }
+    @media (max-width: 767px){
+      padding: 30px 10px;
+    }
+    .close-btn{
+      position: absolute;
+      right: 0;
+      top:0;
+      padding: 5px 10px;
+      background: $theme-color-main;
+      color:#fff;
+      font-size: 18px;
+      transition:.3s;
+      &:hover{
+        background: $theme-color-second;
+      }
+    }
+  }
+}
 .response-container {
   position: relative;
 
diff --git a/home/index.html.erb b/home/index.html.erb
index c2ef1a8..2504017 100644
--- a/home/index.html.erb
+++ b/home/index.html.erb
@@ -36,6 +36,14 @@
       <section class="extra-box col-sm-12" data-pp="5"></section>
   </div>
   </div>
+  <div class="black-screen">
+    <div class="content">
+      <div data-pp='1000'></div>
+      <a href='javascript:;' class="close-btn">
+        <i class="fa fa-times"></i> 
+      </a >
+    </div>
+  </div>
   <%= render_footer %>
 </body>
 </html>
\ No newline at end of file