JQuery FullScreen Overlay

Using JQuery to create an "open" and "close" button to trigger and remove a fullscreen overlay. What is a jquery fullscreen overlay How do you make a jquery fullscreen overlay? This script and codes were developed by Eric Tompkins on 31 October 2021, Sunday.

How do I make an jquery fullscreen overlay?
  1. JQuery FullScreen Overlay Previews
  2. JQuery FullScreen Overlay HTML Codes
  3. JQuery FullScreen Overlay CSS Codes
JQuery FullScreen Overlay Previews

JQuery FullScreen Overlay HTML Codes

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>JQuery FullScreen Overlay</title>
  <link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>

  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>
  <html>
  <head>
    <title>Fullscreen Overlay Animation</title>
  </head>
  <body>
    <div id="container">
      <button class="menuButton" id="overlay-menu" type="button">Open</button>
    </div>
    <div class="overlay overlay-data">
      <button type="button" class="overlay-close">Close</button>
      <nav>
        <ul>
          <li><p>place something here</p></li>
        </ul>
      </nav>
    </div>
    <script>
      $( "#overlay-menu" ).click(function() {
        $( ".overlay" ).addClass
        ('overlay-open');
      });
    </script>
    <script>  
    $( ".overlay-close" ).click(function() {
      $( ".overlay" ).removeClass
      ( 'overlay-open' ); 
      });
    </script>
  </body>
</html>
  
  
</body>
</html>

JQuery FullScreen Overlay CSS Codes

#container {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  height: 50px;
  width: 100px;
}
#overlay-menu {
  width: 100px;
  height: 50px:
}
body {
  background: #7a7a7a;
  color: #1D1F20;
  font-family: "Roboto", sans-serif;
}
.menuButton {
  background-color: #7a7a7a;
  text-indent: 0;
  border: 1px solid #000;
  color: #fff
  font-size: 15px;
  font-weight: bold;
}
.menuButton:hover {
  background-color: #474747;
}
.menuButton:active {
  position: relative;
  top; 1px;
}
.overlay {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(255,255,255,0.80);
}
.overlay nav {
  text-align: center;
  position: relative;
  top: 20%;
  height: 60%;
  font-size: 80px;
}
.overlay ul {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  display: inline-block;
  height: 100%;
  position: relative;
}
.overlay ul li {
  display: inline-block;
  height: 20%;
}
.overlay ul li a {
  font-weight: 300;
  text-decoration: none;
  display: block;
  color: #1d1f20;
  margin-right: 40px;
  list-style: none;
}
.overlay-close {
  width: 150px;
  height: 50px;
  position: absolute;
  right: 10px;
  top: 10px;
  border: 1px solid #000;
  font-size: 14px;
}
.overlay-data {
  opacity: 0;
  visibility: hidden;
  -webkit-transition: opacity 0.5s;
  transition: opacity 0.5s;
  visibility: 0s 0.5s;
  transition: opacity 0.5s, visibility 0s 0.5s;
}
.overlay-open {
  opacity: 1;
  visibility: visible;
  -webkit-transition: opacity 0.5s;
  transition: opacity 0.5s;
}
Do you want hide your ip address?Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup.