Как сделать оверлей когда sidebar открыт?

Question

[ALEX]

Добрый день, есть сайт https://crewbarber.ie/ . При нажатии кнопки "Book Now" открывается сайдбар. Нужно сделать так чтобы когда сайдбар открыт body сайта получает оверлей и затемняется. Когда сайдбар открывается, к нему добавляется CSS класс и я решил использовать Jquery, но данный код не сработал. Буду благодарен за любую помощь

<script>
$(document).ready(function() {
	if ( $( ".ob-widget-container" ).hasClass("slide-in")) {
        $("body").addClass("darker");
}
});
</script>

Comments

[MagnusDidNotBetray]

У вас же есть функции открытия и закрытия сайдбара, вот и добавьте в первую добавление класса для body, а во вторую - удаление.

[ALEX]

MagnusDidNotBetray, это внешний скрипт и нет доступа чтобы отредачить его

Answer 1

[MagnusDidNotBetray]

Можно на кнопки открытия и закрытия сайдбара навесить свои обработчики

document.addEventListener('DOMContentLoaded', () => {
  const buttonOpen = document.querySelector('.ob-widget-btn');
  const buttonClose = document.querySelector('.ob-widget-container__header__close__cross');
  buttonOpen.addEventListener('click', () => {
  	document.body.classList.add('darken');
	});
  buttonClose.addEventListener('click', () => {
  	document.body.classList.remove('darken');
	});
});

Comments

[ALEX]

выбивает ошибку Cannot read property 'addEventListener' of null
at HTMLDocument

[MagnusDidNotBetray]

ALEX, какой плагин используется для этого сайдбара?

[ALEX]

MagnusDidNotBetray, это не плагин, это скрипт отдельного софта который просто подключается в хедере, там просто линк на тот скрипт и нет никакой возможности его редачить

[MagnusDidNotBetray]

ALEX, а если вот так?

document.addEventListener('DOMContentLoaded', () => {
  const observer = new MutationObserver((list, observer) => {
    const buttonOpen = document.querySelector('.ob-widget-btn');
    const buttonClose = document.querySelector('.ob-widget-container__header__close__cross');
    if (!buttonOpen && !buttonOpen) return;
    buttonOpen.addEventListener('click', () => {
      document.body.classList.add('darken');
    });
    buttonClose.addEventListener('click', () => {
      document.body.classList.remove('darken');
    });
    observer.disconnect();
  });

  observer.observe(document.body, {
    childList: true,
    subtree: true
  });
});

[ALEX]

MagnusDidNotBetray, так работает, спасибо вам огромное))