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

 

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

Your content here.

 

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

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

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

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

 

 

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

 

TUTORIAL VIDEO

 

INFOGRAPHIC CHEAT SHEET

HTML CSS Fullscreen Overlay (click to enlarge)

 

 

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!

3 thoughts on “Fullscreen Overlay With CSS JS (Very Simple Example)”

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

Leave a Comment

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