класс hidden_container у активного + еще visible_container

ищу через all visible_container

Ты явно неправильно ищешь. Не вижу причин ему не находить

const modalWindow = document.querySelectorAll('visible_container');
console.log(modalWindow); // <- NodeList [] length: 0

. visible_container

это я здесь точку потерял, в коде у меня с точкой

Ну.. увы, но я сейчас с телефона. На этом кодпене даже смотреть код напряжно, не говоря уже о том, чтобы писать и проверять.

Привет всем.

Думаете это достаточно ванильно написано? Или хре* полная?

function addLazyLoadClasses() {
   var elementsToAdd = [ '.zz-background-overlay', '.zz-widget-wrap', '.zz-section' ];

   elementsToAdd.forEach( item => {
       var findMe = document.querySelectorAll( item );
       findMe.forEach( element => {
           element.classList.add( 'lazyload-wating' );
       });
   });
}

function ebglFind() {
   var findMe = document.querySelectorAll( '.lazyload-wating' );

   findMe.forEach(element => {
       if ( isInViewport( element ) ) {
           element.classList.add( 'lazyload-done' );
       }
   });
}

function isInViewport (el) {
   var top = el.offsetTop;
   var left = el.offsetLeft;
   var width = el.offsetWidth;
   var height = el.offsetHeight;

   while(el.offsetParent) {
       el = el.offsetParent;
       top += el.offsetTop;
       left += el.offsetLeft;
   }

   return (
       top >= window.pageYOffset &&
       left >= window.pageXOffset &&
       (top + height) <= (window.pageYOffset + window.innerHeight) &&
       (left + width) <= (window.pageXOffset + window.innerWidth)
   );
};

window.addEventListener('load', (event) => {
   addLazyLoadClasses();
   ebglFind();
});

window.addEventListener('scroll', function(event) {
   ebglFind();
}, false);

Var и window?

У этого задания есть ТЗ писать с var?

Говнокод но рабочий. P.s. я тоже с телефона. Понимаю что по функциям надо разнести и пока не придумал как сделать чтоб при клике на родителям работало, но с этим уже можно колдавать:

function displayInfo(event) {
 const el = event.target.parentNode.querySelector(".hidden_container");
 el.classList.add("visible_container");
 el.parentNode.addEventListener('click', e => e.stopPropagation())
 document.body.addEventListener('click', function () {
const modalWindow = document.querySelector('.visible_container');
   if(!modalWindow) return
modalWindow.classList.remove("visible_container")
   })
}

Всем привет, столкнулся с проблемой, пробовал пару своих вариантов - не помогло, надеюсь здесь мне подскажут.

Есть кнопки Подробнее, по клику на одну из них - всплывает всплывающее окно.
В этом окне также имеется кнопка Скрыть - скрывает данное всплывающее окно.

Как сделать так, чтобы я мог кликать куда угодно (кроме окна, естественно) и всплывающее окна закрывались? Чтобы не только по клику на Скрыть оно скрывалось.

Codepen: https://codepen.io/andrev_markelov/pen/mdWBKye?editors=0010

p.s код ужасен, писал не я

var

Что var?)

Close modal outside click в гугле

Это не мой вопрос.  Криво перестал. Я отвечал)

Да это плагин себе сегодня писал :) А что, фуфлыжно? У меня еще PHP к нему.

Да там уже отказались по большей части от var

Если нет необходимости писать в одном стиле

То лучше const/let