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

 

DOWNLOAD & DEMO

Firstly, here is the download link to the example code as promised.

 

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>
X
TESTING!

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).

 

 

FULLSCREEN OVERLAY

All right, let us now get into the details of the fullscreen overlay – For those who want to customize it.

 

1) THE JAVASCRIPT

overlay.js
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

overlay.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.

 

 

USEFUL BITS & LINKS

That’s all for this guide, and here is a small section on some extras and links that may be useful to you.

 

COMPATIBILITY CHECKS

This example will work on all modern browsers.

 

LINKS & REFERENCES

 

THE END

Thank you for reading, and we have come to the end of this guide. I hope that it has helped you with your project, and if you have anything to share with this guide, please feel free to comment below. Good luck and happy coding!

1 thought on “Simple Fullscreen Overlay With CSS JS (Free Download)”

Leave a Comment

Your email address will not be published. Required fields are marked *