Question

客户非常具体地要求他们的项目页面与this有类似的感觉。因此，您点击了＆＃39; +＆＃39;按钮显示项目信息，我会说是一个全屏叠加窗口。

我熟悉HTML / CSS＆amp;虽然我已经涉足PHP，但我从未接触过JS。我很确定这是上述网站的开发人员在这里使用的内容。

所以，我的问题是：

我如何实现这一结果（或与此非常接近的事情）？注意 - 该网站正在WP上开发。我不确定这是否会改变任何内容。
完成后，如何将项目信息添加到叠加层？

Answer 1

在按钮上单击将活动类添加到.element并将其添加到

runtime

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。

您可以在该网站上看到几乎完全相同的效果。我在这里给出示例代码：

＆＃13;

$(document).on('click', '.gmapInit', function() {
    var closeThing = $(this).parents("div.tableProcessingToolBarContainer").prevAll("div.googleMapsContainer:first");
    closeThing.attr("style", "");
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="display: none;" class="googleMapsContainer" id="gm1">
        <div class="gmap" style="max-width: 80%;
            max-height: 400px;
            background-color: grey;" class="map">
        </div>
        This Text Should be visible after click
 </div>
 
 <div class="tableProcessingToolBarContainer">
      <div class="container-fluid tableProcessingTools" >
        <div class="row-fluid">
         <div class="appSliderContent tptSliderContent container-fluid ">
                <button class="gmapInit glassyButton">View data in Google Maps</button>
         </div>
        </div>
      </div>
    </div>
 
 <div style="display: none;" class="googleMapsContainer" id="gm2">
        <div class="gmap" style="max-width: 80%;
            max-height: 400px;
            background-color: grey;" class="map">
        </div>
        This Text Should be visible after click
 </div>

    <br>
    
    <div class="tableProcessingToolBarContainer">
      <div class="container-fluid tableProcessingTools" >
        <div class="row-fluid">
         <div class="appSliderContent tptSliderContent container-fluid ">
                <button class="gmapInit glassyButton">View data in Google Maps</button>
         </div>
        </div>
      </div>
    </div>

＆＃13;

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

＆＃13;

链接点击全屏叠加

3 个答案: