Skip to content
Related Articles

Related Articles

How to Dim entire screen except a fixed area using JavaScript ?
  • Last Updated : 31 Jul, 2019

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.




<!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>

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.




<!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>

Output:

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



My Personal Notes arrow_drop_up
Recommended Articles
Page :