Have you ever wanted to display something on your website but not on the page or in a popup window? Use an overlay. An overlay is basically a cover over a page that allows you to also display something over a page. In this tutorial, HTML, JavaScript, and CSS will be used to create a professional-looking overlay.
First, create the HTML structure of the overlay and the content you want to display.
The overlay, which is the dark screen that covers the entire page, is a
Next, define the CSS of the overlay by putting this in your CSS style sheet.
This makes the overlay black and appear over the page. You can also customize these to match your site's look and feel.
Then, put this JavaScript in your site's
This gives further styles to the overlay and the content, and fetches the ID of both elements.
Finally, put this link on your site, so when visitors click on it, the overlay will appear.
And make sure to put a "Close" button somewhere in the overlayContent:
Now you know how to create an overlay for your site. This can be used for a variety of content, including videos, games, images, or just text. Enjoy!
First, create the HTML structure of the overlay and the content you want to display.
<div id="overlay"></div> <div id="overlayContent" style=""> <p>Overlay content goes here...</p> </div>
The overlay, which is the dark screen that covers the entire page, is a
div with the id overlay. The overlayContent div is the box that displays the content. The IDs will be needed for the CSS and JavaScript.Next, define the CSS of the overlay by putting this in your CSS style sheet.
div#overlay {
display: none; /* Until the JavaScript toggles it to display */
z-index: 2; /* Display the overlay over the page; if other page elements have a higher z-index, increase this one. */
background: #000;
position: fixed;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
text-align: center;
}
div#overlayContent {
display: none;
position: relative; /* You can place the overlay content anywhere with the CSS top, bottom, left, and right attributes. */
z-index: 4;
margin: 150px auto 0px auto;
width: 770px;
height: 620px;
color: #000;
background: #B3B3B3;
border-radius: 3px;
}
div#wrapper {
position:absolute;
top: 0px;
left: 0px;
padding-left:24px;
}
This makes the overlay black and appear over the page. You can also customize these to match your site's look and feel.
Then, put this JavaScript in your site's
<head> tag.<script type="text/javascript">
function toggleOverlay(){
var overlay = document.getElementById('overlay');
var overlayContent = document.getElementById('overlayContent');
overlay.style.opacity = .8;
if(overlay.style.display == "block"){
overlay.style.display = "none";
overlayContent.style.display = "none";
} else {
overlay.style.display = "block";
overlayContent.style.display = "block";
}
}
</script>
This gives further styles to the overlay and the content, and fetches the ID of both elements.
Finally, put this link on your site, so when visitors click on it, the overlay will appear.
<a onmousedown="toggleOverlay()">Click here!</a>
And make sure to put a "Close" button somewhere in the overlayContent:
<a onmousedown="toggleOverlay()">Close</a>
Now you know how to create an overlay for your site. This can be used for a variety of content, including videos, games, images, or just text. Enjoy!
