Tutorial: How to create an Overlay Panel

Overlay Panel
Overlay Panel

Today I’m doing another webdesign tutorial, this time I’m going to be showing you how to create an overlay panel. There are lots of ways you can use it, one of then is as a dialog, like in image above.

So let’s start with the HTML structure:

<div class="overlay_panel">
	<b>Overlay Panel</b>
	<p>Phasellus vel metus iaculis mauris condimentum imperdiet. Praesent feugiat fermentum 
           aliquet. Mauris porttitor, nisl at eleifend sodales, eros ex eleifend arcu, sit amet 
           molestie dui neque non tellus. In hac habitasse platea dictumst. Nunc quis accumsan 
           nisi. Donec at congue ante. Morbi laoreet a leo eget pharetra. Aenean scelerisque c
           onsequat vehicula. Sed quis condimentum arcu. Quisque pulvinar mauris eget sapien so
           llicitudin, vitae blandit lectus pellentesque. Nullam at nibh rhoncus, feugiat tellu
           s ut, iaculis velit.
	<a href="#" onclick="hide()">OK</a>

The only thing that matters here is the div with the overlay_panel class, you can put anything you want inside it. As an example I’ve put a title, a text and an ok button.

Now let’s do the styling:

.overlay_panel {
    position: fixed;
    top: 0; 
    left: 0;
    right: 0;
    bottom: 0;
    margin: 100px auto;
    width: 50%;
    display: none;
    border-radius: 2px;
    text-align: justify;
    background-color: white;
    color: #333;
    padding: 20px;
    box-shadow: 2px 2px 10px 2px #333;
.overlay_panel a{

You can adjust the width, height, color and pretty much everything else as you like, but you should keep the display: none to make it hidden by default, and also the position: fixed, which will position your panel in front of your page content.

Lastly, this is how to show/hide it:

function show() {
    document.getElementsByClassName("overlay_panel")[0].style.display = "block";
function hide() {
    document.getElementsByClassName("overlay_panel")[0].style.display = "none";

These two functions just switches the display from none to block, and vice versa. Note that I’ve used the function getElementsByClassName to get the element, but it returns an array, so I had to specify the index to access my element. Alternatively, you could use getElementsById function, which returns only one element.

Recommended for you

Tutorial: How to Create Cards UI with CSS & HTML Cards Demo In this short tutorial I'm going to show you how to create cards, they are trending for quite some time now and I thought it would be a good idea to write about them. For this example I'm only using HTML and CSS, my goal here is to just show you how to create the design. Please let me...

Leave a Reply

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

Obs: Use the tag <pre lang="LANGUAGE"> to include code blocks to your comment.
Example: <pre lang="javascript"> console.log('Test'); </pre>