Блог

Я хотел бы вызвать всплывающую форму после нажатия на 4-ю ссылку в моем нижнем колонтитуле.

Этот текущий метод работает с другой кнопкой на моем сайте, но не со ссылкой в моем нижнем колонтитуле.

Почему это так?

HTML:

  <ul>
    <li><a href="<?php echo esc_url( home_url( '/wordpress/home' ) ); ?>" class="footer-link-text">Home</a></li>
    <li><a href="<?php echo esc_url( home_url( '/wordpress/portfolio/' ) ); ?>"class="footer-link-text">Portfolio</a></li>
    <li><a href="<?php echo esc_url( home_url( '/wordpress/about-me/' ) ); ?>"class="footer-link-text">About Me</a></li>
    <li><a href="#"class="contact-link-footer">Contact</a></li>
</ul>
  

JS:

 document.getElementById('contact-link-footer').addEventListener("click", function() {
  document.querySelector('.bg-modal').style.display = "flex";
  $('body').css('overflow','hidden')
});
  

Вы используете селектор идентификаторов, но у вас есть класс 🙂 ‘contact-link-footer’ на данный момент является классом вашей ссылки, а не идентификатором

Вы можете попробовать следующее: изменить document.getElementById(…) по документу. getElementsByClassName(…)[0] , ноль означает получение первого элемента массива элементов, которые имеют тот же класс в DOM

 
document.getElementsByClassName('contact-link-footer')[0].addEventListener('click', function() {
    console.log('Click in Contact');
    document.querySelector('.bg-modal').style.display = "flex";
    $('body').css('overflow','hidden');
});