0

I've made a CSS-only modal using an input with type=checkbox. Now I want to.. well, I want to make a few things happen, and I may post a few more questions as I continue development, but firstly, I'm trying to lock scrolling ability while the modal is open. I've tried this:

var modalToggle = document.getElementById('vids');

function isOpen() {
 if(modalToggle.checked === true) {
  document.body.style.overflow = "hidden";
 }
}

modalToggle.addEventListener('click', isOpen());

as was suggested in this question

How to lock scrolling of a web page temporarily?

But the style does not get applied to the body. In fact, the body doesn't even have anything in it (yet) aside from the landing screen (containing the modal) with height: 100vh; and a blank div with height: 1000px; I created solely for scroll-testing purposes. Considering that, I tried this:

var modalToggle = document.getElementById('vids');
var space = document.getElementById('space');

function isOpen() {
 if(modalToggle.checked === true) {
  space.style.display = "none";
 }
}

modalToggle.addEventListener('click', isOpen());

still, the style is not applied... To be sure, I'm new to javascript, but I simply can't see how this doesn't work...

ecg8
  • 1,362
  • 1
  • 12
  • 16
panrosmithe
  • 69
  • 10
  • Remove execute when you add event. Use `modalToggle.addEventListener('click', isOpen);` instead of `modalToggle.addEventListener('click', isOpen());` – Tan Duong May 27 '18 at 03:23
  • Perfect. Thank you!! Again, still new to javascript, and I still have yet to really understand what that 'execute' section of a function really does.... – panrosmithe May 27 '18 at 03:28
  • You might need to read [How to use Callback](http://javascriptissexy.com/understand-javascript-callback-functions-and-use-them/). – Tan Duong May 27 '18 at 03:29
  • Definitely will do!! Multiple times, most likely. Thanks again!! – panrosmithe May 27 '18 at 03:39

0 Answers0