• Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

JavaScript How do I do something to the body while a popup is showing

Well, there is a little bit of javascript in here but when a popup in my game shows I want to disable all other things on the screen and make them not respond and create a little tint over everything but the popup. And when the user closes the popup everything resumes. I have no idea I tried to file with js but had no luck.


The popup is here https://idle-command.netlify.app/ click on the pickaxe from the shop and inspect. Here is the js for that one popup.

JavaScript:
let sellOrePop = null;

function sellOre() {

    if(sellOrePop === null) {

        document.getElementById("soldOre").style.display = "block";

        sellOrePop = true;

    }

    else {

        document.getElementById("soldOre").style.display = "none";

        sellOrePop = null;

    }

}
 

Johna

Frontend Web Developer
Staff Team
Guardian
Add an element to your HTML...
HTML:
<div id="popup-overlay"></div>
...and give it this CSS:
CSS:
#popup-overlay {
    position: absolute;
    background-color: black;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    opacity: 0.9;
    z-index: 9998;
    display: none;
}

And then use JS to hide/show that element.
 
Add an element to your HTML...
HTML:
<div id="popup-overlay"></div>
...and give it this CSS:
CSS:
#popup-overlay {
    position: absolute;
    background-color: black;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    opacity: 0.9;
    z-index: 9998;
    display: none;
}

And then use JS to hide/show that element.
The thng is when the scrollbar appears and I scroll down the thing isn't filling up the whole page.
 
Top