CODEWITHSUNDEEP
javascriptjquery
Julien Littler
Julien Littler

Reputation: 25

How to make a link on my footer trigger a pop up?

I would like to trigger a pop up form after clicking the 4th link on my footer.

This current method works with another button on my site but not with the link in my footer.

Why is this?

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')
});

Upvotes: 1

Views: 191

Answers (2)

Jorge Luis Pe&#241;a Lopez
Jorge Luis Pe&#241;a Lopez

Reputation: 482

You can try the next: Change document.getElementById(...) by document. getElementsByClassName(...)[0] , the zero is to get the first element of array of elements that have same class in the 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');
});

Upvotes: 0

Yalcin Kilic
Yalcin Kilic

Reputation: 800

You are using an id-selector but you have a class :) 'contact-link-footer' is at the moment the class of your link and not the id

Upvotes: 1

Related Questions