Open In App

How to Dim entire screen except a fixed area using JavaScript ?

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

Given an HTML document and the task is to dim the entire screen except for one or few elements. It needs to be done to get the attention of the user on some part of the page using JavaScript

Approach:

Example 1: This example focuses a div of the HTML document and another part is made dim. 

html




<!DOCTYPE html>
<html lang="en">
 
<head>
    <title>
        How to Dim entire screen except a
        fixed area using JavaScript ?
    </title>
 
    <style>
        .dim {
 
            /* For Internet Explorer */
            box-shadow: 0 0 0 1000px rgba(0, 0, 0, .3);
 
            /* For other browsers */
            box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .3);
        }
    </style>
</head>
 
<body>
    <h1 style="color:green;" id="h1">
        GeeksforGeeks
    </h1>
 
    <h3>
        Click on button to make everything
        dim on the screen.
    </h3>
 
    <button onclick="GFG_Fun()">
        click here
    </button>
 
    <h3 id="GFG" style="color:green;">
    </h3>
 
    <script>
        let elm = document.getElementById('GFG');
        let heading = document.getElementById('h1');
        function GFG_Fun() {
            heading.classList.add('dim');
            elm.innerHTML = "Everything becomes dim "
                + "except heading(h1)";
        }
    </script>
</body>
 
</html>


Output:

How to Dim entire screen except a fixed area using JavaScript ?

How to Dim entire screen except a fixed area using JavaScript ?

Example 2: In this example, the button is focused, Also pointer-events property is set to none, and another part is made dim. 

html




<!DOCTYPE html>
<html lang="en">
 
<head>
    <title>
        How to Dim entire screen except a
        fixed area using JavaScript ?
    </title>
 
    <style>
        .dim {
 
            /* For Internet Explorer */
            box-shadow: 0 0 0 1000px rgba(0, 0, 0, .3);
 
            /* For other browsers */
            box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .3);
            pointer-events: none;
        }
    </style>
</head>
 
<body>
    <h1 style="color:green;">
        GeeksforGeeks
    </h1>
 
    <h3>
        Click on button to make everything
        dim on the screen.
    </h3>
 
    <button onclick="GFG_Fun()" id="button">
        click here
    </button>
 
    <h3 id="GFG" style="color:green;">
    </h3>
 
    <script>
        let elm = document.getElementById('GFG');
        let btn = document.getElementById('button');
 
        function GFG_Fun() {
            btn.classList.add('dim');
            elm.innerHTML = "Everything becomes dim"
                + " except button";
        }
    </script>
</body>
 
</html>


Output:

How to Dim entire screen except a fixed area using JavaScript ?

How to Dim entire screen except a fixed area using JavaScript ?



Last Updated : 20 Jun, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads