Fullscreen Overlay With CSS JS (Very Simple Example)

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

 

 

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

Open

 

 

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.

1. The fullscreen overlay actually only requires 2 wrappers –
   • <div id="owarp"> is the “transparent background”
   • <div id="obox"> is the “dialog box” itself.
2. 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, the transition 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.

 

 

 

LINKS & REFERENCES

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

 

TUTORIAL VIDEO

 

INFOGRAPHIC CHEAT SHEET