Hide pop up box with JS

Hi folks, I have a really basic model set up. I simply want the model and tinted background to display none when the green button is pressed. The pop up box in in a div called ‘content-holder’

So when the green ‘button’ is pressed ‘content-holder’ will display none or hide.

I know this is basic stuff but I am new to js.


1 Like

Hi @eddg101. If you have some basic knowledge in JS (variables, event listeners), you can do this easily.

  • First create variables for both the button and the model
  • Then add an event listener for the click event for the green button.
  • Now create a function.
  • Inside the function, type var.style.display = "none";, where var represents the variable name for the popup model.
  • Now call this function inside the event listener.

Now click on the green button and check whether it works or not.

The reason I am not posting the full solution is because you will not learn anything form it rather than copy pasting. So, do some research on event listeners, variables and functions and do it yourself and you will remember it for lifetime.

Useful links:

JS Variables:

JS Event Listeners:

JS Functions:

Changing style with JS:

If you still find it difficult, just reply and I will give some hints.

Happy Coding!

Thanks for your help!

1 Like