Welcome to a tutorial on how to create a simple fullscreen overlay with pure CSS and (a little bit of) 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.
TLDR – QUICK SLIDES
Fullscreen Mode – Click Here
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.
FULLSCREEN OVERLAY DEMO
FULLSCREEN OVERLAY
All right, let us now get into the details of the fullscreen overlay – For those who want to customize it.
PART 1) THE HTML
<!-- (A) FULL SCREEN OVERLAY -->
<div id="owrap"><div id="obox">
<p>Your content here.</p>
<button onclick="document.getElementById('owrap').className=''">
Close
</button>
</div></div>
<!-- (B) TOGGLE BUTTON -->
<button onclick="document.getElementById('owrap').className='show'">
Open
</button>
Yep, that’s all for the HTML.
- The fullscreen overlay actually only requires 2 wrappers –
<div id="owarp">
is the “transparent background”<div id="obox">
is the “dialog box” itself.
- Just a simple
<button>
to toggle the fullscreen overlay.
PART 2) FULLSCREEN WRAPPER
/* (A) FULL PAGE OVERLAY */
#owrap {
/* (A1) COVER ENTIRE SCREEN */
width: 100vw; height: 100vh;
position: fixed; top: 0; left: 0; z-index: 999;
background: rgba(0, 0, 0, 0.5);
}
To turn <div id="owrap">
into “fullscreen mode”:
width: 100vw; height: 100vh;
Set it to 100% viewport width and height.position: fixed; top: 0; left: 0; z-index: 999;
Fix it on the screen so that it cannot be “scrolled away”.background: rgba(0, 0, 0, 0.5);
Optional, give it a transparent background.
PART 3) CENTER THE DIALOG BOX
#owrap {
/* (A2) CENTER DIALOG BOX */
display: flex;
justify-content: center;
align-items: center;
}
/* (B) DIALOG BOX COSMETICS */
#obox {
padding: 20px;
min-width: 400px; max-width: 600px;
background: #fff;
}
- (A2)
display: flex; justify-content: center; align-items: center;
Centers the dialog box horizontally and vertically on the screen. - (B) Set the dimensions of the dialog box, and give it an opaque background.
PART 4) SHOW & HIDE THE OVERLAY
#owrap {
/* (A3) HIDDEN BY DEFAULT */
transition: opacity 0.2s;
visibility: hidden;
opacity: 0;
}
/* (A4) SHOW */
#owrap.show {
visibility: visible;
opacity: 1;
}
- (A3)
visibility: hidden; opacity: 0;
We hide the overlay by default, thetransition
will magically add a smooth fade transition. - (A4) Show the overlay when a
.show
CSS class is added to<div id="owrap">
.
Yep, that is exactly what clicking on the HTML buttons does. We simply toggle .show
on the wrapper to show/hide.
P.S. Some of you sharp code ninjas will be thinking why don’t we just toggle display:none
? That is possible, but there won’t be any fade animation – CSS cannot animate display:none
.
EXTRA 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.
LINKS & REFERENCES
- Full-screen loading spinner – Code Boxx
- Example on CodePen – Fullscreen Overlay
TUTORIAL VIDEO
INFOGRAPHIC CHEAT SHEET

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!
PART 1) THE HTML
=>
=>
The spam/security filter stripped the comment… but I think I know what you are referring to. That is from the previous version, I have updated the tutorial to prevent confusion. Thanks for reporting.
thank you!