鏈接全屏覆蓋點擊

Question

客戶端已經很明確要求他們的項目頁面有類似的感覺來此。 因此，您單擊“ +”按鈕以顯示項目信息，在我看來，這是一個全屏覆蓋窗口。

我熟悉HTML / CSS，而涉足PHP卻從未接觸過JS。 而且我非常確定，這就是上面網站的開發人員在這里使用的內容。

因此，我的問題是：

我如何實現此結果（或非常接近它的結果）？ 注意-網站正在WP上開發。 我不確定這是否會改變。
完成后，如何將項目信息添加到疊加層？

Answer 1

在按鈕上單擊，將活動類添加到.element，就是這樣

.element {
   bottom: 0;
   height: 100%;
   left: -100%;
   position: fixed;
   right: auto;
   top: 0;
   width: 100%;
   transition: left .3s ease-in;
}

.element.active {
   left: 0;
   right: 0;
}

Answer 2

我創建了一支小筆，演示如何使用CSS和很少的純Javascript實現此目的：

https://codepen.io/Tauka/pen/OjEQzE

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background-color: green;
  transition: width 2s ease-out;
  overflow-x:hidden;
}

重要時刻：

.overlay必須具有寬度：0和位置：固定
.content必須具有絕對寬度，即px / rem / em

希望能幫助到你！

Answer 3

您可以在W3School網站上找到一個很好的例子。 看看那個https://www.w3schools.com/howto/howto_js_fullscreen_overlay.asp 。

您可以在該站點上看到幾乎完全相同的效果。 我在這里給出示例代碼：

 function openNav() { document.getElementById("myNav").style.width = "100%"; } function closeNav() { document.getElementById("myNav").style.width = "0%"; }

 body { margin: 0; font-family: 'Lato', sans-serif; } .overlay { height: 100%; width: 0; position: fixed; z-index: 1; top: 0; left: 0; background-color: rgb(0,0,0); background-color: rgba(0,0,0, 0.9); overflow-x: hidden; transition: 0.5s; } .overlay-content { position: relative; top: 25%; width: 100%; text-align: center; margin-top: 30px; } .overlay a { padding: 8px; text-decoration: none; font-size: 36px; color: #818181; display: block; transition: 0.3s; } .overlay a:hover, .overlay a:focus { color: #f1f1f1; } .overlay .closebtn { position: absolute; top: 20px; right: 45px; font-size: 60px; } @media screen and (max-height: 450px) { .overlay a {font-size: 20px} .overlay .closebtn { font-size: 40px; top: 15px; right: 35px; } }

 <!DOCTYPE html> <html> <head> <style> </style> </head> <body> <div id="myNav" class="overlay"> <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a> <div class="overlay-content"> <a href="#">About</a> <a href="#">Services</a> <a href="#">Clients</a> <a href="#">Contact</a> </div> </div> <h2>Fullscreen Overlay Nav Example</h2> <p>Click on the element below to open the fullscreen overlay navigation menu.</p> <p>In this example, the navigation menu will slide in, from left to right:</p> <span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; open</span> <script> </script> </body> </html>

鏈接全屏覆蓋點擊

問題描述

3 個解決方案

解決方案1
1 2017-08-23 14:52:14

解決方案2
0 已采納 2017-08-23 15:19:25

解決方案3
-1 2017-08-23 14:52:27

鏈接全屏覆蓋點擊

問題描述

3 個解決方案

解決方案1 1 2017-08-23 14:52:14

解決方案2 0 已采納 2017-08-23 15:19:25

解決方案3 -1 2017-08-23 14:52:27

解決方案1
1 2017-08-23 14:52:14

解決方案2
0 已采納 2017-08-23 15:19:25

解決方案3
-1 2017-08-23 14:52:27