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
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>
For you guys who just want to use this as a “plugin”:
- Very simply include the CSS and JS files in your project.
- Call
overlay.show(CONTENT)
to show the overlay, andoverlay.close()
if you want to programmatically close it. - 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
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:
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.show()
Simply set the contents to theinnerHTML
, and add a.show
CSS class to show the overlay.hide()
Remove the.show
CSS class to hide the overlay.load()
AJAX load the content, then useshow()
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">
Rememberoverlay.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.
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
- 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
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!
thank you!