Simple Fullscreen Overlay With CSS JS (Free Download)

Welcome to a tutorial on how to create a simple fullscreen overlay with pure CSS and Javascript. Want to build your own “popup”, “now loading”, or full-screen menu? Don’t want to bloat your project with 3rd party frameworks? Building one is actually pretty simple – Let us walk through an example in this guide, read on!

ⓘ I have included a zip file with all the source code at the start of this tutorial, so you don’t have to copy-paste everything… Or if you just want to dive straight in.

 

 

TABLE OF CONTENTS

Download & Demo	The Overlay	Useful Bits & Links
The End

 

 

QUICK NOTES

If you spot a bug, feel free to comment below. I try to answer short questions too, but it is one person versus the entire world… If you need answers urgently, please check out my list of websites to get help with programming.

 

EXAMPLE CODE DOWNLOAD

Click here to download the source code, I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

 

HOW TO USE & DEMO

<!-- (A) CSS + JS -->
<link href="overlay.css" rel="stylesheet">
<script src="overlay.js"></script>
 
<!-- (B) TESTING -->
<button onclick="overlay.show('TESTING!')">TEST</button>
 
<!-- (C) AJAX LOAD OVERLAY -->
<button onclick="overlay.load('dummy.html')">AJAX</button>

For you guys who just want to use this as a “plugin”:

1. Very simply include the CSS and JS files in your project.
2. Call overlay.show(CONTENT) to show the overlay, and overlay.close() if you want to programmatically close it.
3. If you want to AJAX load content from another script/file, use overlay.load(URL, DATA).

 

 

 

1) THE JAVASCRIPT

var overlay = {
  // (A) INITIALIZE - CREATE OVERLAY HTML
  ewrap: null,    // html wrapper
  econtent: null, // html contents
  init: () => {
    overlay.ewrap = document.createElement("div");
    overlay.ewrap.id = "owrap";
    overlay.ewrap.innerHTML = `<div id="oclose" onclick="overlay.hide()">X</div>
    <div id="ocontent"></div>`;
    overlay.econtent = overlay.ewrap.querySelector("#ocontent");
    document.body.appendChild(overlay.ewrap);
  },

  // (B) SHOW OVERLAY
  show: (content) => {
    overlay.econtent.innerHTML = content;
    overlay.ewrap.classList.add("show");
  },
  
  // (C) HIDE OVERLAY
  hide: () => { overlay.ewrap.classList.remove("show"); },
 
  // (D) LOAD & SHOW CONTENT VIA AJAX
  load : (url, data) => {
    // (D1) FORM DATA
    let form = new FormData();
    if (data) { for (let [k,v] of Object.entries(data)) {
      form.append(k, v);
    }}
 
    // (D2) SET & SHOW CONTENTS
    fetch(url, { method:"post", body:form })
    .then((res) => { return res.text(); })
    .then((txt) => { overlay.show(txt); });
  }
};
 
// (E) ATTACH OVERLAY TO PAGE
document.addEventListener("DOMContentLoaded", overlay.init);

This may be a little intimidating to some beginners, but essentially:

1. init() Runs on page load, we are just using Javascript to generate the necessary HTML for the fullscreen overlay. Will go through that in the next steps.
2. show() Simply set the contents to the innerHTML, and add a .show CSS class to show the overlay.
3. hide() Remove the .show CSS class to hide the overlay.
4. load() AJAX load the content, then use show() to display it.

 

 

2) THE HTML

<div id="owrap">
  <div id="ocontent"></div>
  <div id="oclose" onclick="overlay.hide()">X</div>
</div>

This is the overlay HTML that the Javascript generates in init().

• <div id="owrap"> The fullscreen overlay container.
• <div id="ocontent"> Remember overlay.show(CONTENT)? This is exactly where the contents will be placed into.
• <div id="oclose"> The close button.

 

3) THE CSS

/* (A) FULL PAGE OVERLAY */
#owrap {
  /* (A1) COVER ENTIRE SCREEN */
  position: fixed; top: 0; left: 0;
  width: 100vw; height: 100vh; z-index: 999;
  background: rgba(0, 0, 0, 0.8);
  
  /* (A2) HIDE OVERLAY BY DEFAULT */
  opacity: 0; visibility: hidden;
  transition: opacity 0.2s;
}

/* (A3) TOGGLE OPEN OVERLAY */
#owrap.show { opacity: 1; visibility: visible; }

/* (B) OVERLAY CONTENT */
#ocontent {
  /* (B1) CENTER ON SCREEN */
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  
  /* (B2) DIMENSIONS */
  box-sizing: border-box; padding: 10px;
  min-width: 300px; max-width: 400px;
  
  /* (B3) COSMETICS */
  background: #fff; text-align: center;
}

/* (C) OVERLAY CLOSE */
#oclose {
  /* (C1) POSITION TOP RIGHT CORNER */
  position: absolute;
  top: 5px; right: 5px;

  /* (C2) COSMETICS FONT SIZE */
  font-size: 2.5em; color: #fff; cursor: pointer;
}

/* (D) FULL PAGE "NO GAPS" */
html, body { padding: 0; margin: 0; }

Finally, we have a whole bunch of CSS. It looks intimidating at first, but take your time to walk through section-by-section – It’s just long-winded, and is pretty much self-explanatory.

 

 

 

COMPATIBILITY CHECKS

• Arrow Functions – CanIUse
• Viewport Units – CanIUse
• CSS Translate – CanIUse
• Template Literals – CanIUse
• Fetch – CanIUse

This example will work on all modern browsers.

 

LINKS & REFERENCES

• Full-screen loading spinner – Code Boxx
• Example on CodePen – Fullscreen Overlay