How to make a footer popup to cover all page?

StackOverflow https://stackoverflow.com/questions/22750816

Question

I want to do the following:

  1. Press menu link called "Contacts" - Done
  2. Create a footer with Email, Rights & Contacts - Done
  3. After press "Contacts" (menu), all page becomes white and Email, Rights & Contacts stay on middle (jQuery maybe?)

Is this possible?

I don't want to create a page with contact forms, just for this. I should just continue my index.html page with #contacts on bottom, and use Parallax or FullPage.JS?

See the page & code: www.wemadeyou.pt

Was it helpful?

Solution

Yes this is possible and not very difficult. One way you can do it make a div on the page and use css display: none to hide the div. Then use jQuery to show that div when the 'Contacts' menu button is clicked.

Something like:

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();
  }
}

This will get you most of the way there. You will still have to handle the form of course.

Hope that helps.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top