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

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:

  • Select the element(s) for the focus.
  • Use box-shadow property to make that area visible.

Example 1: This example focus a div of HTML document and other part is made dim.



filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE HTML> 
<html
  
<head
    <title
        Dim the entire screen except
        a fixed area in 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 style = "text-align:center;"
      
    <h1 style = "color:green;" id = "h1"
        GeeksForGeeks 
    </h1>
      
    <p id = "GFG_UP" style =
        "font-size: 15px; font-weight: bold;">
    </p>
      
    <button onclick = "GFG_Fun()">
        click here
    </button>
      
    <p id = "GFG_DOWN" style =
        "color:green; font-size: 20px; font-weight: bold;">
    </p>
      
    <script
        var up = document.getElementById('GFG_UP');
        up.innerHTML = "Click on button to make everything"
                + " dim on the screen.";
        var down = document.getElementById('GFG_DOWN'); 
        var heading = document.getElementById('h1');
        function GFG_Fun() {
            heading.classList.add('dim');
            down.innerHTML = "Everything becomes dim "
                    + "except heading(h1)";
        }
    </script
</body
  
</html>

chevron_right


Output:

  • Before clicking on the button:
  • After clicking on the button:

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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE HTML> 
<html
  
<head
    <title
        Dim the entire screen except
        a fixed area in 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 style = "text-align:center;" id = "body">  
      
    <h1 style = "color:green;">  
        GeeksForGeeks  
    </h1>
      
    <p id = "GFG_UP" style =
        "font-size: 15px; font-weight: bold;">
    </p>
      
    <button onclick = "GFG_Fun()" id = "button">
        click here
    </button>
      
    <p id = "GFG_DOWN" style
        "color:green; font-size: 20px; font-weight: bold;">
    </p>
      
    <script
        var up = document.getElementById('GFG_UP');
          
        up.innerHTML = "Click on button to make everything"
                + " dim on the screen.";
        var down = document.getElementById('GFG_DOWN'); 
        var button = document.getElementById('button');
          
        function GFG_Fun() {
          button.classList.add('dim');
          down.innerHTML = "Everything becomes dim"
                + " except button";
        }
    </script
</body>  
  
</html>

chevron_right


Output:

  • Before clicking on the button:
  • After clicking on the button:


My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.