如何使页脚弹出以覆盖所有页面？答案

【问题标题】：How to make a footer popup to cover all page?如何使页脚弹出以覆盖所有页面？
【发布时间】：2023-03-02 22:32:02
【问题描述】：

我想做以下事情：

按名为“联系人”的菜单链接 - 完成
使用电子邮件、权限和联系人创建页脚 - 完成
按“联系人”（菜单）后，所有页面变为白色，电子邮件、权限和联系人停留在中间（可能是 jQuery？）

这可能吗？

我不想创建一个包含联系表单的页面，只是为了这个。我应该继续我的 index.html 页面，底部有#contacts，并使用 Parallax 或 FullPage.JS？

查看页面和代码： www.wemadeyou.pt

【问题讨论】：

你可以随心所欲。这是您的网站和您的设计。

标签： javascript jquery css footer fullpage.js

【解决方案1】：

是的，这是可能的，而且不是很困难。一种方法是在页面上创建 div 并使用 css display: none 隐藏 div。然后使用 jQuery 在单击“联系人”菜单按钮时显示 div。

类似：

HTML：

<body>
  <p>Here is some content</p>

  <div class="contact-form-container">
    <form class="contact-form">
    <!-- put your contact form here -->
    </form>
  </div>

</body>

CSS：

.contact-form-container {
  display: none;
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.25);
  z-index: 200;
}

JS（jQuery）：

$(document).ready(function() {
  $('.contacts').click(function(e) {  //or whatever the class/id of your menu button is
    e.preventDefault();
    $('.contact-form-container').toggle();
  }
}

这将使您大部分时间到达那里。当然，您仍然需要处理表单。

希望对您有所帮助。

【讨论】：

我有点困惑。我了解 JS 和 CSS，但我不明白为什么我应该使用
.
@uniqezor 我想我误解了你的问题。我以为您想在按菜单中的“联系人”后在 index.html 页面上显示联系表格。如果您只想在菜单中按“联系人”后在弹出窗口中显示联系人信息，那么您不需要
.
我的页脚有我想要显示的信息/联系人。也许我不清楚。
我希望我的页脚背景和 div 在那里，用白色背景填充我的页面，使用 CSS3 过渡，以及我在那个
上已有的内容