Lord have mercy on Lebanon. If you have anyone in Lebanon check on them. Pray for Lebanon
Adding JavaScript to OPEN and CLOSE the Overlay Effect

In this post I share with you the JavaScript code to turn on and off the overlay effect.

Remember by default when the user lands on your website or webpage the overlay is displayed to none or hidden in the CSS file.

So it will be the role of Javascript to open and close the overlay when users click or hover on a certain element depending on the type of the event you set to trigger the overlay.


In order to get this javascript code working, first check out this CSS part or tutorial that I created first to design the overlay effect.

  • TITLE::
    Learn how to create an overlay effect with CSS.
  • LINK:: Learn more
Tutorial Javascript Code.

Below is the simple javascript that i wrote to open and close the overlay effect.


document.addEventListener('DOMContentLoaded', () => {

const openBtn = document.querySelector('#openOverlay');
const closeBtn = document.querySelector('#closeOverlay');
const overlay = document.querySelector('.overlay');

openBtn.addEventListener('click', () => {
overlay.style.display = 'block';

closeBtn.addEventListener('click', () => {
overlay.style.display = 'none';


Related Post(s)

» Here are some games made with javascript

» How to create a Dynamic GO BACK button on a 404 Error Page

» How to print Webpage content using Javascript

» How to change the image source attribute using Javascript

» How to create Custom Social Media Share Buttons Using JavaScript

collections_bookmark Category :: Javascript
date_range Published :: 3 months ago At: 12:30 AM
event_note Detailed Date :: Jun 21st, 2020
person Writer :: Code