在 CSS 中显示 Overlay 时如何删除所有滚动和单击事件

Question

I have an Overlay that I display on a webpage while some SQL is performed in the background, this SQL can take a good few seconds, so I set this Overlay to be on the screen for 10 seconds using JavaScript.What I want to do, is prevent the user from clicking, and scrolling altogether while this Overlay is visible.

I have the pointer events set to 'none' which doesn't seem to work, even with a high z-index, and displaying as 'block'. For some reason, when the Overlay is displayed, the user can still scroll, click, and highlight text just like the overlay is not even there.

This is my Overlay in CSS:

    #overlay {

        position:fixed;
        display: block;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(120, 120, 120, 0.9);
        pointer-events: none;
        z-index:100000;
      
    } 

My JavaScript:

  //The function to start displaying the overlay

    function start()
    {   
     document.getElementById("overlay").style.display = "block";        
    }


    //The function to stop displaying the overlay
    function end()
    {
            alert("Finished!");
            document.getElementById("overlay").style.display = "none";
    }

 

    setTimeout(function() { start(); }, 1);  //starting the Overlay
    setTimeout(function() { end(); }, 10000); //ending the Overlay after 10 seconds

Answer 1

You should disable scrolling by add overflow: hidden to body

function start()
{   
   document.getElementById("overlay").style.display = "block";        
   document.getElementsByTagName("body")[0].style.overflow = "hidden";        
}


//The function to stop displaying the overlay
function end()
{
   alert("Finished!");
   document.getElementById("overlay").style.display = "none";
   document.getElementsByTagName("body")[0].style.overflow = null;        
}

Answer 2

Remove pointer-events: none to allow the user to click on the overlay, and add user-select:none; instead.

This way, the user can not select anything on the overlay. The user will only be able to resume selection on the other parts of the page once the overlay is hidden.

 function start() { document.getElementById("overlay").style.display = "block"; } //The function to stop displaying the overlay function end() { document.getElementById("overlay").style.display = "none"; console.log('Finished'); } setTimeout(function() { start(); }, 1); //starting the Overlay setTimeout(function() { end(); }, 10000); //ending the Overlay after 10 seconds

 #overlay { position: fixed; display: block; width: 100%; height: 100%; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(120, 120, 120, 0.9); z-index: 100000; user-select: none; overflow: hidden; /* not really needed, but this prevents scroll bars from appearing */ } #main { background-color: #bada55; display: inline-block; padding: 5em; margin: auto; }

 <div id="overlay"> <p> This is part of the overlay inner HTML </p> </div> <div id="main"> This is something not inside the overlay </div>