How to create Full screen Overlay Popup using CSS only

Full screen Overlay using CSS only

Sometimes you need your entire browser window with a black tint in the background and make a popup at the center of the screen. Normally this technique is used for displaying a login window without moving from existing page or displaying a video, when a user clicks on a link or button in a web page.

Full screen Overlay Effects

When you search for a solution for fullscreen overlay, most website provide solutions using JavaScript or jQuery. The following solution is using only CSS and not using any JavaScript of jQuery. Here we are going to create a pop-up window that overlays an existing html page and disabling all links and bringing into focus on the pop up window.

Full Page Overlay Window

Click the following button then you will get a full screen overlay with a pop-up window.

Click here to Log In

The popup screen is a Login screen (its an image) and at the right above of the window there is a closing button also. The login window is not a separate window of the web browser that is opened but rather a div that overlays the existing web page. The overlaying div is a transparent covers to your page data and lets the user knows that they can get back to the parent page by closing the popup window that is on top right.

<!DOCTYPE html>
<html >
<head>
  <style type="text/css">
    .button
    {
      width: 150px;
      padding: 10px;
      background-color: #FF8C00;
      box-shadow: -8px 8px 10px 3px rgba(0,0,0,0.2);
      font-weight:bold;
      text-decoration:none;
    }
    #cover{
      position:fixed;
      top:0;
      left:0;
      background:rgba(0,0,0,0.6);
      z-index:5;
      width:100%;
      height:100%;
      display:none;
    }
    #loginScreen
    {
      height:380px;
      width:340px;
      margin:0 auto;
      position:relative;
      z-index:10;
      display:none;
      background: url(login.png) no-repeat;
      border:5px solid #cccccc;
      border-radius:10px;
    }
    #loginScreen:target, #loginScreen:target + #cover{
      display:block;
      opacity:2;
    }
    .cancel
    {
      display:block;
      position:absolute;
      top:3px;
      right:2px;
      background:rgb(245,245,245);
      color:black;
      height:30px;
      width:35px;
      font-size:30px;
      text-decoration:none;
      text-align:center;
      font-weight:bold;
    }
  </style>
</head>
<body>
  <div align="center">
  <br><br><br><br>
  <a href="#loginScreen" class="button">Click here to Log In</a>
  </div>
  <div id="loginScreen">
  <a href="#" class="cancel">×</a>
  </div>
  <div id="cover" >
  </div>
</body>
</html>

More about CSS Overlay....CSS Overlay Techniques