From 77662746734d9d76fb9b71065852177fb5dbf790 Mon Sep 17 00:00:00 2001 From: Bohung Date: Wed, 16 Jun 2021 16:00:22 +0800 Subject: [PATCH] Add light box. --- assets/javascripts/app.js | 6 +++ assets/stylesheets/template/template.scss | 59 +++++++++++++++++++++++ home/index.html.erb | 8 +++ 3 files changed, 73 insertions(+) diff --git a/assets/javascripts/app.js b/assets/javascripts/app.js index 7c3f9dc..064edf2 100644 --- a/assets/javascripts/app.js +++ b/assets/javascripts/app.js @@ -474,6 +474,12 @@ }) }) 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/template.scss b/assets/stylesheets/template/template.scss index 4cb81dd..c6c57db 100644 --- a/assets/stylesheets/template/template.scss +++ b/assets/stylesheets/template/template.scss @@ -19,6 +19,65 @@ // Widget @import "widget/*"; +.black-screen{ + position: fixed; + width: 100%; + height: 100%; + opacity: 0; + top: -20000px; + background: rgba(0,0,0,.7); + z-index: 1100; + 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; + } + } + } +} .dropdown-toggle:focus { outline: transparent; } diff --git a/home/index.html.erb b/home/index.html.erb index 6d87163..34ff1d4 100644 --- a/home/index.html.erb +++ b/home/index.html.erb @@ -24,6 +24,14 @@ +
+
+
+ + + +
+
<%= render_footer %>