title: How to make a link on my footer trigger a pop up?
body: <p>I would like to trigger a pop up form after clicking the <strong><strong>4th</strong> link</strong> on my footer.</p>
  <p>This current method works with another button on my site but not with the link in my footer.</p>
  <p>Why is this?</p>
  <p><strong>HTML:</strong></p>
  <pre><code> &lt;ul&gt;
      &lt;li&gt;&lt;a href=&quot;&lt;?php echo esc_url( home_url( '/wordpress/home' ) ); ?&gt;&quot; class=&quot;footer-link-text&quot;&gt;Home&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=&quot;&lt;?php echo esc_url( home_url( '/wordpress/portfolio/' ) ); ?&gt;&quot;class=&quot;footer-link-text&quot;&gt;Portfolio&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=&quot;&lt;?php echo esc_url( home_url( '/wordpress/about-me/' ) ); ?&gt;&quot;class=&quot;footer-link-text&quot;&gt;About Me&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=&quot;#&quot;class=&quot;contact-link-footer&quot;&gt;Contact&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  <p><strong>JS:</strong></p>
  <pre><code>document.getElementById('contact-link-footer').addEventListener(&quot;click&quot;, function() {
    document.querySelector('.bg-modal').style.display = &quot;flex&quot;;
    $('body').css('overflow','hidden')
  });
  </code></pre>